Как переопределить стиль MuiPaper- root в таблице материалов

Question

Я использую таблицу материалов (https://material-table.com/).

Моя проблема в том, что я хочу изменить радиус границы таблицы и тень таблицы, по-видимому, этот параметр не существует, используя «опцию»

Но когда я осматриваю таблицу, я могу изменить радиус и тень, как вы можете видеть ниже:

Мне интересно, как переопределить эти значения из 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"
    />
  );
};

Answer 1

Если трудно настроить стили внутри стороннего компонента,

Использовать селектор вложенности с className извне будет хорошо.

Для Ваш пример:

"& .MuiPaper-root"

Полный код:

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