Reactjs与Rails，删除重复的createMuiTheme

Question

下面的代码是我的组件之一。我正在使用Ruby on Rails框架创建这个，使用react_rails gem和webpacker，在Material UI上进行实验。

正如您所看到的，我正在使用我自己选择的字体更改Material UI默认字体主题。下面的代码是成功的。

我的问题是，我是否必须为我的所有组件重复此步骤？导入createMuiTheme，声明主题const，并在每个渲染中包装<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>