How to override react-data-grid styles with Material-UI in React

Question

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

keikai · Accepted Answer · 2020-03-22 14:50:34Z

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:

Collectives™ on Stack Overflow

How to override react-data-grid styles with Material-UI in React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related