Cannot override Mui-selected background Color

Question

I'm wanna override the background color for the selected pagination item from material UI but it doesn't work properly.

Sometimes it turned to the right color but it got back to the wrong color right after I refresh the page.

Right color

Wrong color

Here is my code

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. You should apply your style props to PaginationItem
2. No need in space between & and the target class name: "&.Mui-selected"

Therefore, your code should look like:

      <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