Tab API
想要学习更多组件属性和 CSS API，可以查阅 React Tab 组件的 API 文档。
导入
import Tab from '@mui/material/Tab';
// 或
import { Tab } from '@mui/material';组件名称
The nameMuiTab can be used when providing default props or style overrides in the theme.属性
ButtonBase 组件的属性也是可用的。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| children | unsupportedProp | This prop isn't supported. Use the component prop if you need to change the children structure. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| disabled | bool | false | 如果被设置为 true，那么该组件将会被禁用。 |
| disableFocusRipple | bool | false | If true, the keyboard focus ripple is disabled. |
| 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. |
| icon | element | string | The icon element. | |
| iconPosition | 'bottom' | 'end' | 'start' | 'top' | 'top' | The position of the icon relative to the label. |
| label | node | The label element. | |
| 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. | |
| value | any | You can provide your own value. Otherwise, we fallback to the child position index. | |
| wrapped | bool | false | Tab labels appear in a single row. They can use a second line if needed. |
ref 则会被传递到根元素中。继承
While not explicitly documented above, the props of the ButtonBase component are also available on Tab. You can take advantage of this to target nested components.CSS
| 规则名称 | 全局类名 | 描述 |
|---|---|---|
| root | .MuiTab-root | Styles applied to the root element. |
| labelIcon | .MuiTab-labelIcon | Styles applied to the root element if both icon and label are provided. |
| textColorInherit | .MuiTab-textColorInherit | Styles applied to the root element if the parent [Tabs](/material-ui/api/tabs/) has textColor="inherit". |
| textColorPrimary | .MuiTab-textColorPrimary | Styles applied to the root element if the parent [Tabs](/material-ui/api/tabs/) has textColor="primary". |
| textColorSecondary | .MuiTab-textColorSecondary | Styles applied to the root element if the parent [Tabs](/material-ui/api/tabs/) has textColor="secondary". |
| selected | .Mui-selected | Pseudo-class applied to the root element if selected={true} (controlled by the Tabs component). |
| disabled | .Mui-disabled | Pseudo-class applied to the root element if disabled={true} (controlled by the Tabs component). |
| fullWidth | .MuiTab-fullWidth | Styles applied to the root element if fullWidth={true} (controlled by the Tabs component). |
| wrapped | .MuiTab-wrapped | Styles applied to the root element if wrapped={true}. |
| iconWrapper | .MuiTab-iconWrapper | Styles applied to the wrapper element of `icon` if icon is provided. |
您可以使用组件自定义选项对组件进行个性化：
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.