PopperAPI
React Popper 組件的 API 參考文檔。了解此匯出模組的 props、CSS 和其他 API。
示範
導入
import Popper from '@mui/material/Popper';
// or
import { Popper } from '@mui/material';閱讀關於最小化 bundle 大小的指南，以了解差異。
原生組件的 props 也可使用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| open* | bool | - | 如果 |
| anchorEl | HTML 元素 | object | func | - | 一個 HTML 元素、virtualElement，或是一個返回其中之一的函式。它用於設定 popper 的位置。回傳值將作為 Popper 實例的參考物件傳遞。 |
| children | node | func | - | Popper 渲染函式或節點。 |
| component | elementType | - | 用於根節點的組件。可以是使用 HTML 元素的字串或是組件。 |
| components | { Root?: elementType } | {} | 用於 Popper 內部每個插槽的組件。可以是使用 HTML 元素的字串或是組件。 |
| componentsProps | { root?: func | object } | {} | 用於 Popper 內部每個插槽的 props。 |
| container | HTML 元素 | func | - | 一個 HTML 元素或返回 HTML 元素的函式。 |
| disablePortal | bool | false |
|
| keepMounted | bool | false | 始終將 children 保留在 DOM 中。此 prop 在 SEO 情況下或當您想要最大化 Popper 的響應性時非常有用。 |
| modifiers | Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' | 'afterRead' | 'afterWrite' | 'beforeMain' | 'beforeRead' | 'beforeWrite' | 'main' | 'read' | 'write', requires?: Array<string>, requiresIfExists?: Array<string> }> | - | Popper.js 基於「插件式」架構，其大多數功能都完全封裝在「modifiers」中。 |
| placement | 'auto-end' | 'auto-start' | 'auto' | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | 'bottom' | Popper 位置。 |
| popperOptions | { modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end' | 'auto-start' | 'auto' | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top', strategy?: 'absolute' | 'fixed' } | {} | 提供給 |
| popperRef | ref | - | 指向所使用 popper 實例的 ref。 |
| slotProps | { root?: func | object } | {} | 用於 Popper 內部每個插槽的 props。 |
| slots | { root?: elementType } | {} | 用於 Popper 內部每個插槽的組件。可以是使用 HTML 元素的字串或是組件。 |
| sx | Array<func | object | bool> | func | object | - | 系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。 請參閱 `sx` 頁面以了解更多詳細資訊。 |
| transition | bool | false | 協助支援 react-transition-group/Transition 組件。 |
ref 轉發到根元素。這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於組件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiPopper-root | root | 應用於根元素的類別名稱。 |
您可以使用以下自訂選項之一覆寫組件的樣式
- 使用全域類別名稱。
- 使用規則名稱作為自訂主題中組件
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。