无法覆盖 Mui 选择的背景颜色

Question

我想覆盖 Material UI 中所选分页项的背景颜色，但它无法正常工作。

有时它会变成正确的颜色，但在我刷新页面后它又变成了错误的颜色。

正确的颜色

颜色错误

这是我的代码

export default function CustomPagination (props) {
    const _screenClass = useScreenClass(); 
    const _isBigScreen = (['lg', 'xl', 'xxl'].includes(_screenClass));
    const {
        count,
        defaultPage,
        currentPage,
    } = props;
    return <Pagination
        defaultPage={1}
        count={count}
        sx = {{
        '& .Mui-selected': {
            backgroundColor: "#f16037",
            color:'white',
            borderColor: 'transparent',
            fontSize: 16,
            height: "32px",
            width: "32px",
            borderRadius: "8px",
            },
        }}
        boundaryCount={_isBigScreen ? 2 : 1}
        siblingCount={0}
        renderItem={(item) => {
            return <PaginationItem
            components={{ previous: KeyboardDoubleArrowLeftIcon, next: KeyboardDoubleArrowRightIcon }}
            selected = {item.page == currentPage}
            {...item}
            />;
        }}
    />
}

Answer 1

1. 你应该将你的风格道具应用到PaginationItem
2. & 和目标类名之间不需要空格："&.Mui-selected"

因此，您的代码应如下所示：

      <Pagination
        count={10}
        renderItem={(item) => (
          <PaginationItem
            components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
            {...item}
            sx={{
              "&.Mui-selected": {
                backgroundColor: "#f16037",
                color: "white",
                borderColor: "transparent",
                fontSize: 16,
                height: "32px",
                width: "32px",
                borderRadius: "8px"
              }
            }}
          />
        )}
      />

Working Demo