Как переопределить стили сетки реагирующих данных с пользовательским интерфейсом материалов в React - PullRequest
Новая
       66

Как переопределить стили сетки реагирующих данных с пользовательским интерфейсом материалов в React

1 голос
/ 22 марта 2020

Допустим, у меня есть файл с темами:

themes. js: 

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

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

И файл с приложением. js, где рендер выглядит примерно так: 

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

Теперь я знаю, что могу получить доступ к теме через withStyles: 

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

Но я хочу достичь чего-то другого. MyComponent является очень большим компонентом и имеет, например, класс под названием «response-table-1». И я хочу установить цвет класса «response-table-1» для theme.palette.text, так что-то вроде этого: 

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

Но, очевидно, это не работает. Кто-нибудь знает возможно ли это ? И как я могу этого добиться.

Я могу установить цвет "response-table-1" в файле css, но я хочу изменить его внутри реакции через кнопку, и поэтому мне нужно что-то подобное.

Живая демоверсия: https://stackblitz.com/edit/react-jt9xs1

1 Ответ

1 голос
/ 22 марта 2020

Возможно, вы захотите попробовать nesting-selectors для className

Я обнаружил, что вы не можете просто добавить className к ReactDataGrid, это, вероятно, связано с этой библиотекой, вы может обойти это.

Некоторые замечания:

  • Если вы проверите структуру DOM, вы обнаружите, что класс ReactDataGrid Root равен react-grid-Container , а не react-grid-Main
  • Material-UI withStyles используется в качестве HO C для компонента, для конкретного использования c plz обратитесь к ссылке внизу.
  • проблема в посте редко связана с темой, вы можете использовать свою тему как обычно.
  • Если вы хотите связать свою кнопку со стилями, создайте внешний слой хуков стилей и передайте состояние до 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;

Edit strange-worker-4pk8w

Соответствующий стиль QA:

...