BottomNavigationActionAPI

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

示範

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

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

ButtonBase 元件的 Props 也可使用。

名稱	類型	描述
children	unsupportedProp	不支援此 prop。如果您需要變更 children 結構，請使用 `component` prop。
classes	object	覆寫或擴充應用於元件的樣式。請參閱下方CSS classes API 以瞭解更多詳細資訊。
icon	node	要顯示的圖示。
label	node	標籤元素。
showLabel	bool	如果為 `true`，`BottomNavigationAction` 將顯示其標籤。預設情況下，只有 `BottomNavigation` 內選定的 `BottomNavigationAction` 會顯示其標籤。此 prop 預設為繼承自父 BottomNavigation 元件的值 (`false`)。
sx	Array<func \| object \| bool> \| func \| object	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以瞭解更多詳細資訊。
value	any	您可以提供自己的值。否則，我們會回退到子項位置索引。

ref 會轉發到根元素。

雖然上面未明確記載，但 ButtonBase 元件的 props 也可在 BottomNavigationAction 中使用。您可以利用此優勢來目標巢狀元件。

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

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

類別名稱	規則名稱	描述
.Mui-selected		如果選取，則應用於根元素的狀態類別。
.MuiBottomNavigationAction-iconOnly	iconOnly	如果 `showLabel={false}` 且未選取，則應用於根元素的狀態類別。
.MuiBottomNavigationAction-label	label	應用於標籤 span 元素的樣式。
.MuiBottomNavigationAction-root	root	應用於根元素的樣式。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

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