Тема Material-UI не работает должным образом для компонента таблицы - PullRequest
Новая
       16

Тема Material-UI не работает должным образом для компонента таблицы

0 голосов
/ 03 апреля 2020

Итак, я пытаюсь использовать тему для всего приложения, но она не работает ни для одного из созданных мной компонентов. Я обертываю ThemeProvider вокруг приложения, в котором находятся все компоненты, но, похоже, оно не работает. Что мне не хватает? Я хочу иметь возможность устанавливать тему глобально и не беспокоиться об этом на уровне компонентов. Что еще нужно сделать, чтобы компоненты использовали эти темы?

Theme.ts: 

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

export const theme = createMuiTheme({

    "palette": {
        "common": {
          "black": "#000",
          "white": "#fff"
        },
        "background": {
          "paper": "#fff",
          "default": "#fafafa"
        },
        "primary": {
          "light": "#7986cb",
          "main": "#3f51b5",
          "dark": "#303f9f",
          "contrastText": "#fff"
        },
        "secondary": {
          "light": "rgba(248, 246, 4, 1)",
          "main": "rgba(241, 223, 24, 0.69)",
          "dark": "rgba(221, 220, 136, 1)",
          "contrastText": "rgba(10, 0, 0, 1)"
        },
        "error": {
          "light": "#e57373",
          "main": "#f44336",
          "dark": "#d32f2f",
          "contrastText": "#fff"
        },
        "text": {
          "primary": "rgba(0, 0, 0, 0.87)",
          "secondary": "rgba(0, 0, 0, 0.54)",
          "disabled": "rgba(0, 0, 0, 0.38)",
          "hint": "rgba(0, 0, 0, 0.38)"
        }
      }
    });

index. js (Я пробовал и MuiThemeProvider, и ThemeProvider, и ни сработало) 

/// <reference path="../@types/alltypes.d.ts"/>

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux';
import store from './redux/store/store';
import {Errors} from './components/Errors';
import {theme} from './components/Theme';
import { MuiThemeProvider } from '@material-ui/core/styles';

require('dotenv').config();

ReactDOM.render(
    <Provider store={store}>
        <Errors>
            <MuiThemeProvider theme={theme}>
                <App />
            </MuiThemeProvider>
        </Errors>
    </Provider>
, document.getElementById('root'));

serviceWorker.unregister();

ОБНОВЛЕНИЕ: Итак, я правильно заработал, используя withStyles, но я не понимаю, зачем мне это нужно делать, если каждый компонент вытягивает цвета, которые он использует из темы

...