如何在 React 中使用 Material-UI 覆盖 react-data-grid 样式答案

【问题标题】：How to override react-data-grid styles with Material-UI in React如何在 React 中使用 Material-UI 覆盖 react-data-grid 样式
【发布时间】：2020-07-03 02:06:20
【问题描述】：

假设我有一个带有主题的文件：

themes.js：

import {createMuiTheme} from "@material-ui/core/styles";

export const myTheme = createMuiTheme({
    palette: {
        text: {
            color: "#545F66",
        },
    },
});

并使用 App.js 文件，其中渲染看起来像这样：

return (
        <MuiThemeProvider theme={myTheme}>
            <CssBaseline />
            <MyComponent />
        </MuiThemeProvider>
    );

现在我知道我可以通过 withStyles 访问主题了：

const StyledMyComponent = withStyles(theme => ({
    something: {
        color: theme.palette.text.color
    }    
}))(props => <MyComponent {...props} />);

但我想要实现的是不同的东西。 MyComponent 是一个非常大的组件，例如具有名为“react-table-1”的类我想要的是将类颜色“react-table-1”设置为 theme.palette.text 所以是这样的：

const StyledMyComponent = withStyles(theme => ({
    "react-table-1": {
        color: theme.palette.text
    }    
}))(props => <MyComponent {...props} />);

但显然它不起作用。有谁知道这是否可能？我怎样才能做到这一点。

我可以在 css 文件中设置“react-table-1”颜色，但我想在里面更改它通过按钮做出反应，这就是为什么我需要这样的东西。

现场演示： https://stackblitz.com/edit/react-jt9xs1

【问题讨论】：

标签： javascript css reactjs styles material-ui

【解决方案1】：

您可能想尝试nesting-selectors 作为类名

我发现你不能简单地将className添加到ReactDataGrid，它可能与这个lib有关，你可以解决它。

一些注意点：

如果你检查 DOM 结构，你会发现ReactDataGrid Root 类是react-grid-Container，而不是react-grid-Main
Material-UI withStyles 用作组件的 HOC，具体用法请参考底部链接。
帖子中的问题很少与主题有关，您可以正常使用主题。
如果您想将按钮与样式绑定，制作样式挂钩的外层并将状态向下传递给makeStyles 就可以了。

import React, { useState } from "react";
import ReactDataGrid from "react-data-grid";
import { makeStyles } from "@material-ui/core";

const columns = [
  { key: "id", name: "ID" },
  { key: "title", name: "Title" },
  { key: "complete", name: "Complete" }
];

const rows = [
  { id: 0, title: "Task 1", complete: 20 },
  { id: 1, title: "Task 2", complete: 40 },
  { id: 2, title: "Task 3", complete: 60 }
];

const useStyles = makeStyles(theme => ({
  root: {
    "& div.react-grid-Container": {
      color: "red",
      // color: theme.palette.text.color
    }
  }
}));

const App = () => {
  const classes = useStyles();
  const [row, setRow] = useState([]);
  const onBrutForce = e => {};
  return (
    <div className={classes.root}>
      <ReactDataGrid
        columns={columns}
        rowGetter={i => rows[i]}
        rowsCount={3}
        enableCellSelect={true}
      />
      <br />
      This is what i want to achieve but with "ChangeTheme" button. <br />
      Because i want to set the style to other components too. <br />
      <button onClick={onBrutForce} style={{ margin: "10px" }}>
        (click me)
      </button>
    </div>
  );
};

export default App;