如何在 material-table 中覆盖 MuiPaper-root 样式
How to override MuiPaper-root style in material-table
我正在使用 material-table (https://material-table.com/)。
我的问题是我想更改 table border-radius 和 table 阴影,显然,这个选项不存在使用 'option feature'
但是当我检查 table 时,我可以修改半径和阴影,如下所示:
我想知道如何从 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"
/>
);
};
如果很难在第三方组件中自定义样式,
从外部使用 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>
);
}
root: {
display: 'flex'
"&.MuiPaper-root":{
backgroundColor:"#fafafa" //as an Example
}
},
//有效
我正在使用 material-table (https://material-table.com/)。
我的问题是我想更改 table border-radius 和 table 阴影,显然,这个选项不存在使用 'option feature'
但是当我检查 table 时,我可以修改半径和阴影,如下所示:
我想知道如何从 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"
/>
);
};
如果很难在第三方组件中自定义样式,
从外部使用 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>
);
}
root: {
display: 'flex'
"&.MuiPaper-root":{
backgroundColor:"#fafafa" //as an Example
}
},
//有效