Radio API

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

导入

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

你可以阅读这个关于最小化捆绑包的指南以了解以上二者的差异。

组件名称

在主题中，名称“MuiRadio”可用于提供默认属性（props），或者样式覆盖

属性

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

名称	类型	默认值	描述
checked	bool	false	If `true`, the component is checked.
checkedIcon	node	<RadioButtonIcon checked />	The icon to display when the component is checked.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
color	'default' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string	'primary'	The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
disabled	bool	false	如果被设置为 `true`，那么该组件将会被禁用。
disableRipple	bool	false	If `true`, the ripple effect is disabled.
icon	node	<RadioButtonIcon />	The icon to display when the component is unchecked.
id	string		The id of the `input` element.
inputProps	object		Attributes applied to the `input` element.
inputRef	ref		Pass a ref to the `input` element.
name	string		Name attribute of the `input` element.
onChange	func		Callback fired when the state is changed. Signature: `function(event: object) => void` event: The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean).
required	bool	false	If `true`, the `input` element is required.
size	'medium' \| 'small' \| string	'medium'	The size of the radio. `small` is equivalent to the dense radio styling.
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		The value of the component. The DOM API casts this to a string.

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

继承

尽管上文没有明文记录， ButtonBase 组件的属性(props) 在组件Radio上同样是可用的。你可以利用这一点来指向嵌套组件

CSS

规则名称	全局类名	描述
root	.MuiRadio-root	Styles applied to the root element.
checked	.Mui-checked	Pseudo-class applied to the root element if `checked={true}`.
disabled	.Mui-disabled	Pseudo-class applied to the root element if `disabled={true}`.
colorPrimary	.MuiRadio-colorPrimary	Styles applied to the root element if `color="primary"`.
colorSecondary	.MuiRadio-colorSecondary	Styles applied to the root element if `color="secondary"`.

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

具备全局类名.
在自定义主体中，设定一个规则名称作为组件的styleOverrides属性的一部分。

演示项目

Radio Group