Реагируйте с Rails, удаляйте дубликаты createMuiTheme

Question

Код ниже является одним из моих компонентов. Я создаю это с помощью инфраструктуры Ruby on Rails, с помощью response_rails gem и webpacker, экспериментируя с Material UI.

Как вы можете видеть, я изменяю тему шрифта Material UI по умолчанию с моим собственным выбором шрифта. код ниже является успехом.

мой вопрос, должен ли я повторить этот шаг для всех моих компонентов? импорт createMuiTheme, указание константы темы и перенос <MuiThemeProvider /> в каждом рендере?

Есть ли один способ сделать это универсально, не повторяя во всех компонентах? Спасибо за совет.

import React from 'react';
import PropTypes from 'prop-types';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Popover from '@material-ui/core/Popover';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
import EmailIcon from '@material-ui/icons/Email';
import HomeIcon from '@material-ui/icons/Home';
import PersonIcon from '@material-ui/icons/Person';
import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles';


const theme = createMuiTheme({
  typography: {
    fontFamily: 'Bebas',
  },
});


export class SimpleCard extends React.Component {

render () {
 return (

<div >
 <MuiThemeProvider theme={theme}>
  <Card raised="true">
    <CardContent >
    <List>
    <ListItem>
      <Avatar>
        <EmailIcon />
      </Avatar>
      <ListItemText primary="Email" secondary={this.props.order.order_mail} />
    </ListItem>
    </List>
    </CardContent>
  </Card>
 </MuiThemeProvider>
</div>

  );
}
}


export default withStyles(styles)(SimpleCard);

Answer 1

Вы пытались обернуть MuiThemeProvider вокруг всего сайта / приложения? Это то, что я делаю в React.js. Я установил свою тему в корневом файле и обернул ее вокруг всего компонента

Answer 2

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

// Components
import Navbar from "./components/layout/Navbar";
import Footer from "./components/layout/Footer";
import Login from "./components/auth/Login";
import Dashboard from "./components/dashboard/Dashboard";


// Styles
import "./stylesheets/App.css";
import {
  MuiThemeProvider,
  createMuiTheme,
  withTheme
} from "@material-ui/core/styles";
import { grey } from "@material-ui/core/colors";
import { withStyles } from "@material-ui/core";

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100%",
        margin: "0"
      }
    }
  },
  palette: {
    primary: {
      light: "#c146b1",
      main: "#8e0081",
      dark: "#5c0054",
      contrastText: "#ffffff"
    },
    secondary: {
      light: "#6bffff",
      main: "#00eae3",
      dark: "#00b7b1",
      contrastText: "#000000"
    }
  }
});

const drawerWidth = 240;

const styles = theme => ({
  app: {
    backgroundColor: grey[200]
  },
  drawerOpen: {
    marginLeft: 0
  },
  drawerClosed: {
    marginLeft: -drawerWidth
  }
});


class App extends Component {
  constructor() {
    super();
    this.state = {
      navOpen: false
    };
  }
  toggleDrawer = () => {
    this.setState({
      navOpen: !this.state.navOpen
    });
  };
  render() {
    const { classes } = this.props;
    return (
        <MuiThemeProvider theme={theme}>
            <div className={classes.app}>
              <Navbar
                toggleDrawer={this.toggleDrawer}
                navOpen={this.state.navOpen}
              />
              <Route exact path="/" component={Dashboard} />
              <Route exact path="/register" component={PatientRegister} />
              <Route exact path="/login" component={Login} />
              <Footer />
            </div>
          </Router>
        </MuiThemeProvider>
    );
  }
}

export default withTheme(theme)(withStyles(styles)(App));

Это пример моего компонента, который будет отображаться в корневом элементе div (то есть во всем приложении). Обратите внимание, как оборачивает все приложение? Я много чего сделал, чтобы было проще понять, но если вы используете Redux (что здорово), то я бы порекомендовал использовать его в качестве внешней оболочки, а остальное внутри. Другими словами:

<Provider store={store}>
  <MuiThemeProvider theme={theme}>
    <div class="App">
      // Your App Here
    </div>
  </MuiThemeProvider>
</Provider>