title: Custom prev/next Pagination icon background color with Material UI
body: <p>I want to add a background color to the MUI Pagination prev and next icons but the MUI exposes only the <code>Pagination</code> element that doesn't seem to take a style object and apply it to the icons but to the <code>Pagination</code> as a whole.</p>
  <p>Here's what I tried first:</p>
  <pre><code>const useStyles = makeStyles(() =&gt; createStyles({
    page: {
      padding: '0',
    },
    icon: {
      borderRadius: '16px',
      padding: '0 6px',
      backgroundColor: '#b74d3e',
      width: '100%',
      height: '100%',
      color: '#fff',
    },
  }));
  
  const classes = useStyles();
  </code></pre>
  <p>Applying it to <code>Pagination</code> like</p>
  <pre><code>&lt;div className={`${classes.page} ${classes.icon}`}&gt;
    &lt;Pagination count={16} /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>resulted in all the styles rules applied to the whole <code>Pagination</code> element.
  The second go was attempt to use the <code>PaginationItem</code> element which seem to require a custom element (<code>component</code>) to display it on the screen. I'm not sure how to provide one and if it's needed to change the icon background color only.</p>
  <pre><code>&lt;Pagination
    count={16}
    renderItem={() =&gt; (
      &lt;PaginationItem
        component={}
        classes={{
          page: classes.page,
          icon: classes.icon,
        }}
      /&gt;
    )}
  /&gt;
  </code></pre>
  <p>An empty <code>component</code> returns an error and React's <code>Link</code> didn't pass for a valid one.</p>
  <p>How do I change the prev and next arrow icon background color?</p>