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"
    />
  );
};

Topgallant

Answer 1

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>
  );
}

Tearjerker

Answer 2

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)",
        },
      },
    },
  },
});

Briant

Answer 3

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

//that was working

Cube

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. – Hire

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. – Hire

Answer 4

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

Bertiebertila