Reactjs with Rails, remove duplicated createMuiTheme

Question

the code below is one of my component. i am creating this with Ruby on Rails framework, with react_rails gem and webpacker, experimenting on Material UI.

as you can see, i am changing the Material UI default font theme with my own choice of font. below code is a success.

my question is, do i have to repeat this step for all my component? importing createMuiTheme, stating the theme const, and wrapping <MuiThemeProvider /> in every render?

is there a single way to do this universally, without repeating in all component? thanks for the advice.

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);

score 0 · Answer 1 · answered Aug 04 '18 at 17:22

0

Did you try wrapping the MuiThemeProvider around the entire site/app? This is what I do in React.js. I set up my theme in the root file and wrap it around the entire component

answered Aug 04 '18 at 17:22

Adam Johnston

1,399
2
12
23

hey can roughly advice how you do it? sorry im still kind of new with reactjs in rails. i have the same idea in mind but not sure how to execute and can't find any online tutorial on this :/ – ckeat9 Aug 04 '18 at 17:37

score 0 · Answer 2 · answered Aug 04 '18 at 18:03

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));

This is an example of my component that will be rendered in the root div (aka the entire application). Notice how wraps the entire app? I stripped a lot out to make it simpler to understand, but if you are using Redux (which is awesome) then I would recommend having that as your outer wrapper, and the rest inside of that. In other words:

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

But essentially the will pass the theme down to any children below it, so by wrapping your entire app with this component you should be able to pass the theme down to all the components in your app. — Adam Johnston, Aug 04 '18 at 18:03

Reactjs with Rails, remove duplicated createMuiTheme

2 Answers2