PaginationItem API
想要学习更多组件属性和 CSS API,可以查阅 React PaginationItem 组件的 API 文档。
导入
import PaginationItem from '@mui/material/PaginationItem';
// 或
import { PaginationItem } from '@mui/material';组件名称
在主题中,名称“MuiPaginationItem”可用于提供默认属性(props),或者样式覆盖属性
原生(Native) 组件的属性也是可用的。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| color | 'primary' | 'secondary' | 'standard' | string | 'standard' | The active color. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. |
| component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
| components | { first?: elementType, last?: elementType, next?: elementType, previous?: elementType } | { first: FirstPageIcon, last: LastPageIcon, next: NavigateNextIcon, previous: NavigateBeforeIcon, } | The components used for first, last, next & previous item type |
| disabled | bool | false | 如果被设置为 true,那么该组件将会被禁用。 |
| page | node | The current page number. | |
| selected | bool | false | If true the pagination item is selected. |
| shape | 'circular' | 'rounded' | 'circular' | The shape of the pagination item. |
| 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. | |
| type | 'end-ellipsis' | 'first' | 'last' | 'next' | 'page' | 'previous' | 'start-ellipsis' | 'page' | The type of pagination item. |
| variant | 'outlined' | 'text' | string | 'text' | The variant to use. |
ref 则会被传递到根元素中。CSS
| 规则名称 | 全局类名 | 描述 |
|---|---|---|
| root | .MuiPaginationItem-root | Styles applied to the root element. |
| page | .MuiPaginationItem-page | Styles applied to the root element if type="page". |
| sizeSmall | .MuiPaginationItem-sizeSmall | Styles applied to the root element if size="small". |
| sizeLarge | .MuiPaginationItem-sizeLarge | Styles applied to the root element if size="large". |
| text | .MuiPaginationItem-text | Styles applied to the root element if variant="text". |
| textPrimary | .MuiPaginationItem-textPrimary | Styles applied to the root element if variant="text" and color="primary". |
| textSecondary | .MuiPaginationItem-textSecondary | Styles applied to the root element if variant="text" and color="secondary". |
| outlined | .MuiPaginationItem-outlined | Styles applied to the root element if variant="outlined". |
| outlinedPrimary | .MuiPaginationItem-outlinedPrimary | Styles applied to the root element if variant="outlined" and color="primary". |
| outlinedSecondary | .MuiPaginationItem-outlinedSecondary | Styles applied to the root element if variant="outlined" and color="secondary". |
| rounded | .MuiPaginationItem-rounded | Styles applied to the root element if rounded="true". |
| ellipsis | .MuiPaginationItem-ellipsis | Styles applied to the root element if type="start-ellipsis" or type="end-ellipsis". |
| firstLast | .MuiPaginationItem-firstLast | Styles applyed to the root element if `type="first"` or type="last". |
| previousNext | .MuiPaginationItem-previousNext | Styles applyed to the root element if `type="previous"` or type="next". |
| focusVisible | .Mui-focusVisible | Pseudo-class applied to the root element if keyboard focused. |
| disabled | .Mui-disabled | Pseudo-class applied to the root element if disabled={true}. |
| selected | .Mui-selected | Pseudo-class applied to the root element if selected={true}. |
| icon | .MuiPaginationItem-icon | Styles applied to the icon element. |
您可以使用组件自定义选项对组件进行个性化:
- 具备 全局类名.
- 在自定义主体中,设定一个规则名称作为组件的
styleOverrides属性的一部分。