How to override MuiPaper-root style in material-table

Question

I'm using the material-table (https://material-table.com/).

My issue is that I want to change the table border-radius and table shadow, apparently, this option does not exist using 'option feature'

But when I inspect the table I could modify radius and shadow as you can see below :

I'm wondering how to override these values from Reactjs :


const useStyles = makeStyles(theme => ({
  root: {
  }
}));


const MainTable = props => {
  const {className, params, ...rest} = props

(...)
  return (
    <MaterialTable
      className={classes.MuiPaperRounded}
      columns={[
        {title: 'Equipement', field: 'equipement'},
        {title: 'TAG', field: 'tag'},
        {title: 'Nombre de points de mesures', field: 'nombreDePointsDeMesures'},
        {title: 'Mesuré', field: 'mesure', type: 'boolean'}
      ]}
      data={rows}
      icons={(...)}
      options={{
        tableLayout: {backgroundColor: 'green'},
      }}
      title="Routine vibration"
    />
  );
};

score 17 · Accepted Answer · answered Apr 01 '20 at 11:05

If it's difficult to customize styles inside third party component,

Use nesting selector with className from outside would be fine.

For your example:

"& .MuiPaper-root"

Full code:

import React from "react";
import "./styles.css";
import { makeStyles } from "@material-ui/core";
import MaterialTable from "material-table";

const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiPaper-root": {
      borderRadius: "100px",
      boxShadow: "10px 10px 5px 0px rgba(0,0,0,0.75);"
    }
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <MaterialTable />
    </div>
  );
}

score 2 · Answer 2 · answered Oct 04 '22 at 22:50

The correct way to override theme styles is described in the docs at https://mui.com/material-ui/customization/theme-components/#global-style-overrides.

For your scenario the override would be:

const theme = createTheme({
  components: {
    // Name of the component
    MuiPaper: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          borderRadius: "100px",
          boxShadow: "10px 10px 5px 0px rgba(0,0,0,0.75)",
        },
      },
    },
  },
});

score 0 · Answer 3 · edited Dec 18 '21 at 11:25

0

root: {
        display: 'flex'
        "&.MuiPaper-root":{
            backgroundColor:"#fafafa" //as an Example
        }
  },

//that was working

edited Dec 18 '21 at 11:25

Mohit Kushwaha

1,003
1
10
15

answered Dec 18 '21 at 01:30

Dinidu Lochana Dissanayake

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 18 '21 at 08:18
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 18 '21 at 14:57

score 0 · Answer 4 · answered Nov 28 '22 at 14:52

You can override the component entirely with your own if you want (here we put a Box instead for example):

<MaterialTable title="Available Options" 
isLoading={loading}
icons={tableIcons} 
columns={tableColumns} 
data={tableData}  
components={{
    Container: props => <Box>{props.children}</Box>
  }}
... the rest of your settings

How to override MuiPaper-root style in material-table

4 Answers4