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
属性的一部分。