ButtonBase API
导入
import ButtonBase from '@mui/material/ButtonBase';
// 或
import { ButtonBase } from '@mui/material';ButtonBase contains as few styles as possible.
It aims to be a simple building block for creating a button.
It contains a load of style reset and some focus/ripple logic.
组件名称
在主题中，名称“MuiButtonBase”可用于提供默认属性（props），或者样式覆盖属性
原生（Native） 组件的属性也是可用的。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| action | ref | A ref for imperative actions. It currently only supports focusVisible() action. | |
| centerRipple | bool | false | If true, the ripples are centered. They won't start at the cursor interaction position. |
| children | node | The content of the component. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| component | element type | The component used for the root node. Either a string to use a HTML element or a component. ⚠️ Needs to be able to hold a ref. | |
| disabled | bool | false | 如果被设置为 true，那么该组件将会被禁用。 |
| disableRipple | bool | false | If true, the ripple effect is disabled.⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the focusVisibleClassName. |
| disableTouchRipple | bool | false | If true, the touch ripple effect is disabled. |
| focusRipple | bool | false | If true, the base button will have a keyboard focus ripple. |
| focusVisibleClassName | string | This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed. | |
| LinkComponent | elementType | 'a' | The component used to render a link when the href prop is provided. |
| onFocusVisible | func | Callback fired when the component is focused with a keyboard. We trigger a onFocus callback too. | |
| sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| TouchRippleProps | object | Props applied to the TouchRipple element. | |
| touchRippleRef | func | { current?: { pulsate: func, start: func, stop: func } } | A ref that points to the TouchRipple element. |
ref 则会被传递到根元素中。CSS
| 规则名称 | 全局类名 | 描述 |
|---|---|---|
| root | .MuiButtonBase-root | Styles applied to the root element. |
| disabled | .Mui-disabled | Pseudo-class applied to the root element if disabled={true}. |
| focusVisible | .Mui-focusVisible | Pseudo-class applied to the root element if keyboard focused. |
您可以使用组件自定义选项对组件进行个性化：
- 具备 全局类名.
- 在自定义主体中，设定一个规则名称作为组件的
styleOverrides属性的一部分。