Rating API

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

导入

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

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

组件名称

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

属性

原生（Native）组件的属性也是可用的。

名称	类型	默认值	描述
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
defaultValue	number	null	The default input value. Use when the component is not controlled.
disabled	bool	false	如果被设置为 `true`，那么该组件将会被禁用。
emptyIcon	node	<StarBorder fontSize="inherit" />	The icon to display when empty.
emptyLabelText	node	'Empty'	The label read when the rating input is empty.
getLabelText	func	function defaultLabelText(value) { return `${value} Star${value !== 1 ? 's' : ''}`; }	Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating. This is important for screen reader users. For localization purposes, you can use the provided translations. Signature: `function(value: number) => string` value: The rating label's value to format.
highlightSelectedOnly	bool	false	If `true`, only the selected icon will be highlighted.
icon	node	<Star fontSize="inherit" />	The icon element.
IconContainerComponent	elementType	function IconContainer(props) { const { value, ...other } = props; return <span {...other} />; }	The component containing the icon.
max	number	5	Maximum rating.
name	string		The name attribute of the radio `input` elements. This input `name` should be unique within the page. Being unique within a form is insufficient since the `name` is used to generated IDs.
onChange	func		Callback fired when the value changes. Signature: `function(event: object, value: number \| null) => void` event: The event source of the callback. value: The new value.
onChangeActive	func		Callback function that is fired when the hover state changes. Signature: `function(event: object, value: number) => void` event: The event source of the callback. value: The new value.
precision	number	1	The minimum increment value change allowed.
readOnly	bool	false	Removes all hover effects and pointer events.
size	'small' \| 'medium' \| 'large' \| string	'medium'	The size of the autocomplete.
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	number		The rating value.

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

CSS

规则名称	全局类名	描述
root	.MuiRating-root	Styles applied to the root element.
sizeSmall	.MuiRating-sizeSmall	Styles applied to the root element if `size="small"`.
sizeMedium	.MuiRating-sizeMedium	Styles applied to the root element if `size="medium"`.
sizeLarge	.MuiRating-sizeLarge	Styles applied to the root element if `size="large"`.
readOnly	.MuiRating-readOnly	Styles applied to the root element if `readOnly={true}`.
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.
visuallyHidden	.MuiRating-visuallyHidden	Visually hide an element.
label	.MuiRating-label	Styles applied to the label elements.
labelEmptyValueActive	.MuiRating-labelEmptyValueActive	Styles applied to the label of the "no value" input when it is active.
icon	.MuiRating-icon	Styles applied to the icon wrapping elements.
iconEmpty	.MuiRating-iconEmpty	Styles applied to the icon wrapping elements when 空白的文本框.
iconFilled	.MuiRating-iconFilled	Styles applied to the icon wrapping elements when filled（填充）.
iconHover	.MuiRating-iconHover	Styles applied to the icon wrapping elements when hover.
iconFocus	.MuiRating-iconFocus	Styles applied to the icon wrapping elements when focus.
iconActive	.MuiRating-iconActive	Styles applied to the icon wrapping elements when active.
decimal	.MuiRating-decimal	Styles applied to the icon wrapping elements when decimals are necessary.

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

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

演示项目

Rating