如何覆盖材料表中的 MuiPaper-root 样式

Posted 2023-02-22

【中文标题】如何覆盖材料表中的 MuiPaper-root 样式

【英文标题】：How to override MuiPaper-root style in material-table

【发布时间】：2020-07-13 02:30:50

【问题描述】：

我正在使用材料表 (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"
    />
  );
;

【参考方案1】：

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

//这是正常的

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

如果在第三方组件内部自定义样式有困难，

从外部使用 nesting selector 和 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>
  );