按鈕基底API

React ButtonBase 組件的 API 參考文件。了解此匯出模組的屬性、CSS 和其他 API。

範例

有關此 React 組件的使用範例和詳細資訊，請訪問組件範例頁面

按鈕

匯入

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

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

ButtonBase 包含盡可能少的樣式。它的目標是成為創建按鈕的簡單構建模組。它包含大量的樣式重置和一些焦點/漣漪邏輯。

屬性

原生組件的屬性也可用。

名稱	類型	預設	描述
action	ref	-	用於命令式操作的 ref。目前僅支援 `focusVisible()` 操作。
centerRipple	bool	false	如果為 `true`，則漣漪會置中。它們不會從游標互動位置開始。
children	node	-	組件的內容。
classes	object	-	覆寫或擴展應用於組件的樣式。有關更多詳細資訊，請參閱下方的CSS 類別 API。
component	element type	-	用於根節點的組件。可以是字串以使用 HTML 元素或組件。此需要能夠持有 ref。
disabled	bool	false	如果為 `true`，則組件會停用。
disableRipple	bool	false	如果為 `true`，則會停用漣漪效果。 ⚠️ 如果沒有漣漪，則預設情況下不會為 :focus-visible 設定樣式。請務必透過使用 `.Mui-focusVisible` 類別套用個別樣式來醒目提示元素。
disableTouchRipple	bool	false	如果為 `true`，則會停用觸摸漣漪效果。
focusRipple	bool	false	如果為 `true`，則基本按鈕將具有鍵盤焦點漣漪。
focusVisibleClassName	string	-	此屬性可以協助識別哪個元素具有鍵盤焦點。當元素透過鍵盤互動獲得焦點時，將套用類別名稱。它是 CSS :focus-visible 選擇器的 polyfill。此功能的Rationale 在此處說明。如果需要，可以使用 polyfill 將 `focus-visible` 類別套用至其他組件。
LinkComponent	elementType	'a'	當提供 `href` 屬性時，用於呈現連結的組件。
onFocusVisible	func	-	當組件透過鍵盤取得焦點時觸發的回呼。我們也會觸發 `onFocus` 回呼。
sx	Array<func \| object \| bool> \| func \| object	-	系統屬性，允許定義系統覆寫以及其他 CSS 樣式。有關更多詳細資訊，請參閱 `sx` 頁面。
TouchRippleProps	object	-	應用於 `TouchRipple` 元素的屬性。
touchRippleRef	func \| { current?: { pulsate: func, start: func, stop: func } }	-	指向 `TouchRipple` 元素的 ref。

ref 會轉發到根元素。

主題預設屬性

您可以使用 MuiButtonBase 透過主題變更此組件的預設屬性。

CSS 類別

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

類別名稱	規則名稱	描述
.Mui-disabled		如果 `disabled={true}`，則應用於根元素的狀態類別。
.Mui-focusVisible		如果鍵盤取得焦點，則應用於根元素的狀態類別。
.MuiButtonBase-root	root	應用於根元素的樣式。

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

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

原始碼

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