ToggleButton API

想要学习更多组件属性和 CSS API，可以查阅 React ToggleButton 组件的 API 文档。

导入

import ToggleButton from '@mui/material/ToggleButton';
// 或
import { ToggleButton } from '@mui/material';

您可以通过阅读本指南以最小化捆包大小来了解这种差异。

The name MuiToggleButton can be used when providing default props or style overrides in the theme.

ButtonBase 组件的属性也是可用的。

名称	类型	默认值	描述
value^*	any		The value to associate with the button when selected in a ToggleButtonGroup.
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.
color	'standard' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string	'standard'	The color of the button when it is in an active state.
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`.
fullWidth	bool	false	If `true`, the button will take up the full width of its container.
selected	bool	false	If `true`, the button is rendered in an active state.
size	'small' \| 'medium' \| 'large' \| string	'medium'	The size of the button. The prop defaults to the value inherited from the parent ToggleButtonGroup component.
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.

ref 则会被传递到根元素中。

尽管上文没有明确记载， <1>ButtonBase 组件的 props 也在 ToggleButton上可用。您可以将此用于 <3>目标嵌套组件

规则名称	全局类名	描述
root	.MuiToggleButton-root	Styles applied to the root element.
disabled	.Mui-disabled	Pseudo-class applied to the root element if `disabled={true}`.
selected	.Mui-selected	Pseudo-class applied to the root element if `selected={true}`.
standard	.MuiToggleButton-standard	Pseudo-class applied to the root element if `color="standard"`.
primary	.MuiToggleButton-primary	Pseudo-class applied to the root element if `color="primary"`.
secondary	.MuiToggleButton-secondary	Pseudo-class applied to the root element if `color="secondary"`.
sizeSmall	.MuiToggleButton-sizeSmall	Styles applied to the root element if `size="small"`.
sizeMedium	.MuiToggleButton-sizeMedium	Styles applied to the root element if `size="medium"`.
sizeLarge	.MuiToggleButton-sizeLarge	Styles applied to the root element if `size="large"`.

您可以使用组件自定义选项对组件进行个性化：

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.