Set the color of the text in the Material UI pagination component to a subtle shade

I would like to customize the color of the text in Material UI's pagination component. Specifically, I want the action button to be white and the text portion to be grey, similar to the left action arrow in the image below. Is there a way for me to achieve this customization and have control over the color of the text?

https://i.sstatic.net/bwEl2.png

import React from 'react';
import TablePagination from '@material-ui/core/TablePagination';
import PropTypes from 'prop-types';
import { withTheme, withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    flexShrink: 0,
     color: theme.palette.common.white,
    marginLeft: theme.spacing.unit * 2.5,
  },
});

const PortfolioPagination = ({
  numOfItems, rowsPerPage, page, handleChangePage, classes
}) => {
  return (
    <div >
      <TablePagination
        component="div"
        className={classes.root}
        count={numOfItems}
        page={page}
        onChangePage={handleChangePage}
        rowsPerPageOptions={[]}
        rowsPerPage={rowsPerPage} />
    </div>

  );
};

PortfolioPagination.defaultProps = {

};

PortfolioPagination.propTypes = {
  classes: PropTypes.object.isRequired,
  numOfItems: PropTypes.number.isRequired,
  rowsPerPage: PropTypes.number.isRequired,
  page: PropTypes.number.isRequired,
  handleChangePage: PropTypes.func.isRequired,
};

export default withTheme()(withStyles(styles)(PortfolioPagination));

Answer №1

After encountering a similar issue, I successfully resolved it by utilizing the component's style customization options. Below is a sample solution:

import { TablePagination } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  color: {
    color: "green"
  },
  leftIconButton: {
    color: "blue !important"
  },
  rightIconButton: {
    color: "red !important"
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <TablePagination
        classes={{
          root: classes.color
        }}
        backIconButtonProps={{ className: classes.leftIconButton }}
        nextIconButtonProps={{ className: classes.rightIconButton }}
        rowsPerPageOptions={5}
        component="div"
        count={10}
        rowsPerPage={5}
        page={1}
        onChangePage={() => {}}
        onChangeRowsPerPage={() => {}}
      />{" "}
    </div>
  );
}

Check out the Live Demo here:

https://codesandbox.io/s/late-field-s59ox?fontsize=14&hidenavigation=1&theme=dark

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to stop a current action when a new action is initiated?

My current setup involves an action creator that performs a costly calculation and triggers an action when the user inputs data in real-time. The challenge arises when multiple inputs are entered, as I want to avoid running the entire expensive calculati ...

Tips on efficiently compressing JSON data in order to receive it using the bodyParser.json method

I am looking to compress a JSON file before sending it to my server. I want to handle the compression in the browser by utilizing an explainer and then pass it to the bodyParser.json middleware. The client-side function would look something like this: e ...

Obtain the value of the background image's URL

Is there a way to extract the value of the background-image URL that is set directly in the element tag using inline styling? <a style="background-image: url(https:// ....)"></a> I attempted to retrieve this information using var url = $(thi ...

Tips for styling an image and vCard within a Foundation accordion menu

I am working on a project that involves creating a list using an accordion feature to display names of individuals. When a user clicks on a person, I want the dropdown content to show their image and vcard details. How can I structure the content so that ...

Discovering the target DOM element using the useRef hook in next.js while iterating through

// code example for next.js export default function Header() { const pp = useRef(null); const pp2 = useRef(null); function show() { pp.current.classList.add("right-0"); pp.current.classList.remove("-right-2/3"); pp2. ...

What is the reason for the error that is being caused by using arrow functions in my code

I'm currently working on a React application, but I keep running into errors that are causing issues. Here is the code snippet in question: import React from 'react'; import { Link } from 'react-router-dom'; const LINKS = [ { to ...

The mobile website layout appears immaculate on the emulator, but it doesn't translate well on real mobile devices

Recently, I delved into the world of html/css/javascript and decided to create a website as a way to practice my skills. However, I have come to realize that many of the methods I used are not considered best practices. I am committed to improving and will ...

Excessive content within the div element causing overflow

In my Laravel project, I am facing an issue with the patient history form. The content overflows under a div as shown in the image below. View first image To address this problem, I tried using overflow:hidden in the CSS section. However, this caused my ...

Bootstrap grid not maintaining consistent column widths

Currently, I am in the process of setting up a responsive bootstrap grid for the projects section on my portfolio page. My goal is to create a 3x3 grid that adjusts seamlessly for mobile devices and breaks down into a 2-column grid and eventually a 1x6 gri ...

Issue with Socket.io: Server side emit fails to send if the value meets specific criteria

Currently, I am working on a personal project and facing some challenges with socket.io. I am attempting to emit a socket from the server, but it seems that the delivery is only successful if the socket address is changed from /lobby/invalid to /lobby/inf ...

"Encountering a Prisma type error while attempting to add a new record

I am currently utilizing Prisma with a MySQL database. Whenever I attempt to create a new record (School), an error of type pops up in the console. Additionally, I am implementing a framework called Remix.run, although it does not seem to be causing the is ...

Is there a way to retrieve the background URL from CSS using Selenium Webdriver?

I am attempting to verify the URL of an image within a div element's background property in the CSS for the webpage. However, when I retrieve the CssValue and display it, it appears to be blank. The HTML structure for the div is as follows: <div ...

I'm having trouble figuring out how to remove an unexpected blank space that appears after the <li> element in a basic drop-down menu code. Can

Why is the browser (Mac Chrome + Firefox) adding extra space after my simple CSS drop-down menu where I have a hidden sub-menu? Check out the code below: <ul> <li>Option Zero</li> <li>Option One Is Longer</li> &l ...

Execute the component function located within one page using another page

Can someone help me understand how to trigger OnSwipe from inside a different JS file named CardFooter.js? This file contains a button with an OnClick event that triggers OnSwipe from the preceding JS file called CardItem.js. Both of these files are includ ...

An issue arises when using react-tooltip: "There is an error stating that the types of property 'data-tooltip-content' are incompatible."

Here is the code snippet that I am having trouble with: <button type="button" data-tooltip-id="columns-setings-tooltip" className={clsx( styles.rowControlPanelColumnsOptions, isColumnsDialogVisible & ...

Creating a custom design for a button using an external CSS file

I have an HTML code linked to a CSS file where I'd like to style buttons. The button styles are defined in the CSS file. Everything else is working fine, but when I attempt to apply the styled button, it reverts back to a standard HTML button unless ...

What is the best way to set a javascript variable as the props value for a component in React?

I decided to create a new component called CheckboxFilter. In order to utilize it and assign properties to it, I need to pass props with the value of a JavaScript variable : const FilterWrapper = ({ component, filterLabel, requiredField, ...others }) => ...

Guide on ensuring the client waits for authorization state to load before requesting data

Recently, I discovered the useAuth and useRequireAuth hooks which can be found at . These hooks are extremely valuable for client-side authentication. However, I'm curious about the best approach to wait for authentication data before fetching additio ...

Developing a Reactive TextField with Material-UI in React for precise focusing

I am currently utilizing the Material-UI TextField from Material-UI website. I am looking to enable autofocus on this component, however I'm unable to figure out a way to do it through setting autofocus=true directly in the markup. Can anyone provide ...

Having multiple parameters in React Router will alter the URL without affecting the component itself

When I click on the link-button, it is supposed to redirect me to another page with a full URL like localhost:3001/companies/name/forms However, instead of redirecting, it just changes the URL each time I click, resulting in URLs like localhost:3001/compa ...