MUI Base(@mui/base)是一个无样式(headless/unstyled)的 React 组件与 Hooks 库。与自带 Material Design 样式的 Material UI 不同,MUI Base 只提供逻辑、状态管理、无障碍支持与键盘交互,不包含任何 CSS,样式完全由使用者自行决定,可使用 Tailwind、CSS Modules、styled-components、原生 CSS 或任意方案。
安装方式:
npm install @mui/base
或
pnpm add @mui/base
主要特点:
- 零默认样式:组件渲染语义化 HTML,不带类名或 CSS。
- Hooks 优先 API:每个组件都有对应 Hook(useButton、useInput 等),灵活性最大。
- 符合 WAI-ARIA:内部处理焦点管理、键盘导航与 ARIA 属性。
- 体积小:不依赖主题 Provider,也不依赖 emotion/styled-engine。
- 可组合:Hooks 返回 prop-getter(getRootProps、getInputProps),可展开到自定义元素上。
适用场景:
- 构建自定义设计系统(非 Material Design)。
- 与 Tailwind CSS 等工具类 CSS 集成。
- 需要对渲染的 HTML 与样式拥有最大控制权。
- 构建多品牌主题的白标产品。
不适用场景:
- 想要开箱即用的 Material Design:应使用 Material UI。
- 需要带默认样式的快速原型:应使用 Material UI 或 Joy UI。
核心 Hooks:
useButton:提供按钮行为,包括点击处理、禁用状态、focus-visible 检测与键盘激活。返回 getRootProps、active、disabled、focusVisible。
useInput:管理输入状态,包括焦点、错误与装饰(adornment)支持。返回 getRootProps、getInputProps、focused、error、disabled、value。
useMenu / useMenuItem:构建可访问的下拉菜单,支持键盘导航、高亮管理与开关状态,配合 useDropdown、DropdownContext、useMenuButton 使用。useMenu 返回 getListboxProps、open、highlightedValue、dispatch。
useSlider:完整的滑块行为,支持滑块定位、刻度、范围与值管理。返回 getRootProps、getThumbProps、getRailProps、getTrackProps、values、active、dragging。
useSwitch:开关行为,管理选中状态与无障碍。返回 getInputProps、checked、disabled、focusVisible。
useSelect:自定义选择/下拉,支持选项管理、键盘导航与多选。返回 getButtonProps、getListboxProps、getOptionProps、open、value、highlightedOption。
useTabs / useTab:可访问的标签页导航,支持面板关联与键盘操作,配合 useTabPanel、useTabsList 使用。
使用方式:通过 Hook 获取 prop-getter,将其展开到自定义元素上,再自行添加类名与样式。例如 useButton 的 getRootProps 展开到 button 元素,useInput 的 getRootProps 与 getInputProps 分别展开到包裹元素与 input 元素。
限制:资料未提供具体版本兼容性、浏览器支持范围、性能基准或收费信息,暂未提供。