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
属性的一部分。