RatingAPI

React Rating 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

如需此 React 元件用法的範例和詳細資訊，請造訪元件示範頁面

Rating

匯入

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

瞭解差異，請閱讀此關於最小化套件大小的指南。

Props

原生元件的 Props 也可用。

名稱	類型	預設	描述
classes	object	-	覆寫或擴充應用於元件的樣式。請參閱下方的CSS 類別 API 以瞭解更多詳細資訊。
component	elementType	-	用於根節點的元件。可以是 HTML 元素的字串或元件。
defaultValue	number	null	預設值。當元件不受控制時使用。
disabled	bool	false	如果為 `true`，則元件會停用。
emptyIcon	node	<StarBorder fontSize="inherit" />	空白時要顯示的圖示。
emptyLabelText	node	'Empty'	評分輸入為空白時讀取的標籤。
getLabelText	func	function defaultLabelText(value) { return `${value \|\| '0'} Star${value !== 1 ? 's' : ''}`; }	接受一個函數，該函數會傳回一個字串值，為評分的目前值提供使用者友善的名稱。這對於螢幕閱讀器使用者來說很重要。為了本地化目的，您可以使用提供的翻譯。簽名：`function(value: number) => string` `value` 要格式化的評分標籤值。
highlightSelectedOnly	bool	false	如果為 `true`，則只會醒目提示選取的圖示。
icon	node	<Star fontSize="inherit" />	要顯示的圖示。
IconContainerComponent	elementType	function IconContainer(props) { const { value, ...other } = props; return <span {...other} />; }	包含圖示的元件。已棄用－請改用 `slotProps.icon.component`。此 prop 將在 v7 中移除。請參閱從已棄用的 API 遷移以瞭解更多詳細資訊。
max	number	5	最大評分。
name	string	-	radio `input` 元素的 name 屬性。此輸入 `name` 在頁面中應是唯一的。在表單中保持唯一性是不夠的，因為 `name` 用於產生 ID。
onChange	func	-	值變更時觸發的回呼。簽名：`function(event: React.SyntheticEvent, value: number \| null) => void` `event` 回呼的事件來源。 `value` 新值。
onChangeActive	func	-	當 hover 狀態變更時觸發的回呼函式。簽名：`function(event: React.SyntheticEvent, value: number) => void` `event` 回呼的事件來源。 `value` 新值。
precision	number	1	允許的最小增量值變更。
readOnly	bool	false	移除所有 hover 效果和指標事件。
size	'small' \| 'medium' \| 'large' \| string	'medium'	元件的大小。
slotProps	{ decimal?: func \| object, icon?: func \| object, label?: func \| object, root?: func \| object }	{}	用於內部每個 slot 的 props。
slots	{ decimal?: elementType, icon?: elementType, label?: elementType, root?: elementType }	{}	用於內部每個 slot 的元件。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以瞭解更多詳細資訊。
value	number	-	評分值。

ref 會轉發到根元素。

主題預設 props

您可以使用 MuiRating 透過主題變更此元件的預設 props。

Slots

Slot 名稱	類別名稱	預設元件	描述
root	.MuiRating-root	`'span'`	用於 root slot 的元件。
label	.MuiRating-label	`'label'`	用於 label slot 的元件。
icon	.MuiRating-icon	`'span'`	用於 icon slot 的元件。
decimal	.MuiRating-decimal	`'span'`	用於 decimal slot 的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。它們會在觸發特定狀態時應用於元件的 slots。

類別名稱	規則名稱	描述
.Mui-disabled		如果 `disabled={true}`，則應用於根元素的狀態類別。
.Mui-focusVisible		如果鍵盤聚焦，則應用於根元素的狀態類別。
.Mui-readOnly		如果 `readOnly={true}`，則應用於根元素的樣式。
.MuiRating-iconActive	iconActive	作用中時應用於圖示包裝元素的樣式。
.MuiRating-iconEmpty	iconEmpty	空白時應用於圖示包裝元素的樣式。
.MuiRating-iconFilled	iconFilled	填滿時應用於圖示包裝元素的樣式。
.MuiRating-iconFocus	iconFocus	聚焦時應用於圖示包裝元素的樣式。
.MuiRating-iconHover	iconHover	hover 時應用於圖示包裝元素的樣式。
.MuiRating-labelEmptyValueActive	labelEmptyValueActive	當「無值」輸入處於作用中時，應用於其標籤的樣式。
.MuiRating-sizeLarge	sizeLarge	如果 `size="large"`，則應用於根元素的樣式。
.MuiRating-sizeMedium	sizeMedium	如果 `size="medium"`，則應用於根元素的樣式。
.MuiRating-sizeSmall	sizeSmall	如果 `size="small"`，則應用於根元素的樣式。
.MuiRating-visuallyHidden	visuallyHidden	視覺上隱藏元素。

您可以使用以下其中一個客製化選項覆寫元件的樣式

使用全域類別名稱。
在自訂主題中使用規則名稱作為元件styleOverrides 屬性的一部分。

原始碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以瞭解更多詳細資訊。