Rating API

Documentação da API para o componente React Rating . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

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

Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

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

Propriedades

Propriedades do componente nativo também estão disponíveis.

Nome	Tipo	Padrão	Descrição
classes	object		Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
defaultValue	number	null	The default input value. Use when the component is not controlled.
disabled	bool	false	Se `true`, o componente está desabilitado.
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.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regra	Classe global	Descrição
root	.MuiRating-root	Estilos aplicados ao elemento raiz.
sizeSmall	.MuiRating-sizeSmall	Estilos aplicados para o elemento raiz se `size="small"`.
sizeMedium	.MuiRating-sizeMedium	Estilos aplicados para o elemento raiz se `size="medium"`.
sizeLarge	.MuiRating-sizeLarge	Estilos aplicados para o elemento raiz se `size="large"`.
readOnly	.MuiRating-readOnly	Estilos aplicados para o elemento raiz se `readOnly={true}`.
disabled	.Mui-disabled	Pseudo-class aplicada a o elemento raiz se `disabled={true}`.
focusVisible	.Mui-focusVisible	Pseudo-class aplicada a o elemento raiz se teclado focado.
visuallyHidden	.MuiRating-visuallyHidden	Visually hide an element.
label	.MuiRating-label	Estilos aplicados a the label elements.
labelEmptyValueActive	.MuiRating-labelEmptyValueActive	Styles applied to the label of the "no value" input when it is active.
icon	.MuiRating-icon	Estilos aplicados a the icon wrapping elements.
iconEmpty	.MuiRating-iconEmpty	Styles applied to the icon wrapping elements when vazio.
iconFilled	.MuiRating-iconFilled	Styles applied to the icon wrapping elements when preenchido.
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.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Com um nome de classe global.
Com um nome de regra como parte da propriedade styleOverrides do componente em um tema personalizado.

Demonstrações

Rating