如何为Material UI分页组件的上/下一页图标自定义背景色？

Got it, let's sort out this issue where you want to style just the prev/next arrow icons in MUI's Pagination component. Your initial attempts either applied styles to the whole component or got stuck with PaginationItem configuration—here's how to fix it properly:

Method 1: Using makeStyles (MUI v4 or v5 with legacy styling) #

First, define your styles targeting only the prev/next items, then use the renderItem prop to apply those styles conditionally:

import { Pagination, PaginationItem, makeStyles, createStyles } from '@material-ui/core';

const useStyles = makeStyles(() => createStyles({
  // Style for the button container of prev/next icons
  arrowButton: {
    borderRadius: '16px',
    backgroundColor: '#b74d3e',
    // Optional hover effect for better UX
    '&:hover': {
      backgroundColor: '#9a3f31',
    },
  },
  // Style for the arrow icon itself
  arrowIcon: {
    color: '#fff',
  },
}));

export default function StyledPagination() {
  const classes = useStyles();

  return (
    <Pagination
      count={16}
      renderItem={(item) => (
        <PaginationItem
          {...item} // Pass through all default props
          classes={{
            // Only apply styles if the item is prev or next
            root: item.type === 'prev' || item.type === 'next' ? classes.arrowButton : undefined,
            icon: item.type === 'prev' || item.type === 'next' ? classes.arrowIcon : undefined,
          }}
        />
      )}
    />
  );
}

Key Notes: #

• We check item.type to target only the prev/next controls (instead of all pagination items like page numbers).
• The root class affects the button container (where we add the background color), and the icon class targets the arrow SVG directly for text color.
• You don't need to pass a custom component to PaginationItem unless you want it to act as a link (e.g., for client-side routing)—the default is a button, which works perfectly for pagination controls.

Method 2: Using sx Prop (MUI v5 Recommended) #

If you're using MUI v5, the sx prop is a cleaner way to apply inline styles without makeStyles:

import { Pagination, PaginationItem } from '@mui/material';

export default function StyledPagination() {
  return (
    <Pagination
      count={16}
      renderItem={(item) => (
        <PaginationItem
          {...item}
          sx={{
            // Conditionally apply styles to prev/next items
            ...(item.type === 'prev' || item.type === 'next' ? {
              borderRadius: '16px',
              backgroundColor: '#b74d3e',
              '&:hover': {
                backgroundColor: '#9a3f31',
              },
              // Target the internal icon element to set its color
              '& .MuiPaginationItem-icon': {
                color: '#fff',
              },
            } : {})
          }}
        />
      )}
    />
  );
}

Why Your Previous Attempts Didn't Work: #

• Applying styles to the parent div of Pagination would cascade to the entire component, not just the arrow icons.
• When using PaginationItem, leaving the component prop empty causes errors because it expects a valid element. The default component is a button, so you can omit it unless you need a link. If you do want to use Link (for routing), make sure you import it from React Router and pass it correctly:

  import { Link } from 'react-router-dom';
  // Inside renderItem:
  <PaginationItem component={Link} to={`/page/${item.page}`} {...item} />
  

内容的提问来源于stack exchange，提问作者El Anonimo