How to change background color of mui table in react js?

Hi Friends πŸ‘‹,

Welcome To aGuideHub!

To change background color of mui table in React js, you can use this css code sx={{ backgroundColor: "lightblue"}}. It will change background color of mui table.

Today, I am going to show you, how to change background color of mui table in react js.

Table of contents

  • Install Material-UI.
  • Import the Mui table component.
  • Define the Mui table component.
  • Apply styles to the table component.

Let’s start with the first step.

Step 1: Install Material-UI

Install the following packages to use change background color of mui table in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

Step 2: Import the Mui table component.

To change background color of mui table in React, first, you have to import the table. We have imported the table, tableBody, tableCell, tableContainer, tableHead, tableRow, and Paper components from the @mui/material library.

import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';

Step 3: Define the Mui table component.

We have to define to show the data of our table. we will create an array of employees with their name, age, and gender.

<TableHead>
  <TableRow>
    <TableCell>Name</TableCell>
    <TableCell>Age</TableCell>
    <TableCell>Gender</TableCell>
  </TableRow>
</TableHead>

Step 4: Apply styles to the table component.

To add a border to a MUI table, you need to use the makestyle hook provided by material-ui to add a CSS class to it.

const useStyles = makeStyles({
  table: {
    minWidth: 350,
    borderRadius: '10px 0 0 10px', // Set border radius here
    m: 4,
    width: '5rem',
    height: '5rem',
    overflow: `scroll`,
  },
});

MUI material change background color of mui table example.

The below code is an example of a Material UI table. You have to import @mui material table. In the Material Table function when you create a table component, it consists of a table head and a table body. We create our TableContainer component with a Paper component as its child. and use sx prop to set background color.

App.js

import React from 'react';
import { makeStyles } from '@mui/styles';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';

const useStyles = makeStyles({
  table: {
    minWidth: 350,
    borderRadius: '10px 0 0 10px', // Set border radius here
    m: 4,
    width: '5rem',
    height: '5rem',
    overflow: `scroll`,
  },
});

function RoundedTable() {
  const classes = useStyles();

  return (
    <TableContainer component={Paper}
      sx={{
        padding: "0px 0px",
        borderRight: "2px solid black",
        backgroundColor: "lightblue",
        fontSize: "1.1rem"
      }}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Age</TableCell>
            <TableCell>Gender</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell>John Doe</TableCell>
            <TableCell>32</TableCell>
            <TableCell>Male</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Jane Smith</TableCell>
            <TableCell>28</TableCell>
            <TableCell>Female</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  );
}
export default RoundedTable;

In the above code example, I have used the @mui/material component and changed background color of mui table.

Check the output of the above code example.

React, Mui, change background color

Here, we are provided code sandbox links for the above program change background color of mui table. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best πŸ‘

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts