Глобальные стили с пользовательским интерфейсом React и Material

Question

Я новичок в React and Material, но мне нужно написать корпоративное приложение с хорошим стилем. Я хотел бы использовать какие-то глобальные стили для своего приложения (чтобы иметь возможность изменить его позже) с функциональными компонентами в реакции (возможно, позже я добавлю избыточность).

Каков наилучший практический подход для глобальных стилей с реагированием и материалом (последние версии)?

Как насчет этого (ThemeProvider): https://material -ui.com / styles /расширенный / ? Я читал о MuiThemeProvider, но не смог найти его в документации версии 4 материала. Это устарело? В чем разница между MuiThemeProvider и ThemeProvider?

Большое спасибо

- Реакция (рендеринг на стороне клиента) и Материал (последние версии) Бэкэнд: Узел

Answer 1

По моему опыту, использование MuiThemeProvider и createMuiTheme работает прекрасно. Тем не менее, я использую Matarial-UI версии 3.9.2.

MuiThemeProvider должен обернуться вокруг всего вашего приложения. Все, что вам нужно сделать во всех ваших компонентах, это вместо того, чтобы передавать объект стиля со стилями,передать функцию, которая передается в теме.

Пример:

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import {NavBar, Routes} from '../'
const theme = createMuiTheme({
  palette: {
    primary: {
      main: 'red'
    },
/* whatever else you want to add here */
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <NavBar />
        <Routes />
      </MuiThemeProvider>
    )
  }

, затем в navbar скажем:

import React from 'react';
import { withStyles } from '@material-ui/core';
const styles = theme => ({
  root: {
    color: theme.palette.primary.main,,
  }
})

const NavBar = ({classes}) => {
  return <div className={classes.root}>navigation</div>
}

export default withStyles(styles)(NavBar);

Надеюсь, что это помогает, у меня очень хорошо работает!