如何在React中使用Material-UI覆盖react-data-grid样式 [英] How to override react-data-grid styles with Material-UI in React

问题描述

假设我有一个主题文件:

themes.js:

 从"@ material-ui/core/styles"导入{createMuiTheme}；导出const myTheme = createMuiTheme({调色板:{文本: {颜色:#545F66"，}，}，}); 

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

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

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

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

但是我想要实现的是不同的东西.MyComponent是一个很大的组件，例如，具有一个名为"react-table-1"的类我想要的是将类颜色"react-table-1"设置为theme.palette.text像这样:

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

但是显然它不起作用.有人知道这是否可能吗?以及我该如何实现.

我可以在CSS文件中设置"react-table-1"颜色，但我想在内部进行更改通过按钮做出反应，这就是为什么我需要这样的东西.

现场演示:

---

相关样式质量检查:

• 功能和古典风格

• 将功能转换为经典

Let's say i have a file with themes:

themes.js:

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

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

And file with App.js, where render looks something like this:

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

Now i know that i can access the theme via withStyles:

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

But what i want to achieve is something different. MyComponent is a very big component and has for example class called "react-table-1" And the thing i want is to set the class color "react-table-1" to theme.palette.text so something like this:

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

But obviously it doesn't work. Does anyone know if this is possible ? And how can i achieve that.

I can set "react-table-1" color in css file but i want to change it inside react via button, and that's why i need something like this.

Live demo: https://stackblitz.com/edit/react-jt9xs1

解决方案

You may want to try nesting-selectors for className

I found that you can't simply add className to ReactDataGrid, it's probably related to this lib, you can make a workaround for it.

Some notice points:

• If you check the DOM structure, you would find out that the ReactDataGrid Root class is react-grid-Container, not react-grid-Main
• Material-UI withStyles is used as a HOC for component, for specific usage plz refer to the link at the bottom.
• The problem in the post is rarely related to Theme, you can use your Theme as normal.
• If you want to bind your button with styles, make an outer layer of styles hooks and pass the state down to makeStyles would be fine.

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;

---

Related styling QA:

• Functional and classical styling

• Convert functional to classical

这篇关于如何在React中使用Material-UI覆盖react-data-grid样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！