reactjs 如何在material-table中覆盖MuiPaper-root样式

qlvxas9a 于 2022-11-29 发布在 React

关注(0)|答案(4)|浏览(81)

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

reactjs

来源：https://stackoverflow.com/questions/60969224/how-to-override-muipaper-root-style-in-material-table

4条答案

按热度按时间

ax6ht2ek1#

如果难以在第三方组件中定制样式，
从外部使用带有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>
  );
}

赞(0）回复(0）举报 2022-11-29

7fyelxc52#

覆盖主题样式的正确方法在www.example.com上的文档中有描述https://mui.com/material-ui/customization/theme-components/#global-style-overrides。
对于您的方案，覆盖将是：

const theme = createTheme({
  components: {
    // Name of the component
    MuiPaper: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          borderRadius: "100px",
          boxShadow: "10px 10px 5px 0px rgba(0,0,0,0.75)",
        },
      },
    },
  },
});

赞(0）回复(0）举报 2022-11-29

rjee0c153#

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

//这是工作

赞(0）回复(0）举报 2022-11-29

jucafojl4#

如果需要，您可以使用自己的组件完全覆盖该组件（例如，这里我们使用Box代替）：

<MaterialTable title="Available Options" 
isLoading={loading}
icons={tableIcons} 
columns={tableColumns} 
data={tableData}  
components={{
    Container: props => <Box>{props.children}</Box>
  }}
... the rest of your settings

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs 如何在material-table中覆盖MuiPaper-root样式

4条答案

相关问题

热门标签

最新问答