如何在材料表中覆盖MuiPaper根样式

时间:2020-04-01 10:52:54

标签: javascript css reactjs material-ui material-table

我正在使用物料表(https://material-table.com/)。

我的问题是我想更改表格的边框半径和表格阴影,显然,使用“选项功能”不存在此选项

但是当我检查表格时,可以修改半径和阴影,如下所示:

enter image description here

我想知道如何从Reactjs覆盖这些值:

 div.Button:last-child {
  margin-left: auto;
}

1 个答案:

答案 0 :(得分:6)

如果很难在第三方组件中自定义样式,

从外部将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>
  );
}

Edit sleepy-thunder-s947k

enter image description here