我正在使用物料表(https://material-table.com/)。
我的问题是我想更改表格的边框半径和表格阴影,显然,使用“选项功能”不存在此选项
但是当我检查表格时,可以修改半径和阴影,如下所示:
我想知道如何从Reactjs覆盖这些值:
div.Button:last-child {
margin-left: auto;
}
答案 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>
);
}