Leveraging createMuiTheme to customize default styles for divs, paragraphs, and the body element

Question

Leveraging createMuiTheme to customize default styles for divs, paragraphs, and the body element

Seeking guidance on customizing a Material UI Theme

I aim to modify the default styles for elements like <body>. Currently, at the root of my React tree:

import theme from './mui-theme'

ReactDOM.render(
   <Router>
     <ThemeProvider theme={theme}>
       <StylesProvider injectFirst>
         {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
         <CssBaseline />
         <App />
       </StylesProvider>
     </ThemeProvider>
   </Router>,
   document.getElementById('root'),
);

The provided theme does not include styling for 'body1'

const theme = useTheme() reveals that it is defined as:

typography:
  body1:
    fontFamily: "Roboto,"Helvetica Neue""
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.5

This 'body1' setting is desired but currently requires using the Typography tag with variant='body1'. Otherwise, text within a div follows the styling set by CssBaseline, such as font-size: .875rem;, which I wish to change.

Is there a way to override CssBaseline styling using createMuiTheme? I have tried adding:

body: {
    fontSize: '1rem',
  },

While this modification shows up in console.log(theme), how can I ensure that the <body> tag actually utilizes this style?

css reactjs material-ui themes

Answer 1

Answer №1

Here is an illustration of how you can customize the CssBaseline:

import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  "@global": {
    body: {
      ...theme.typography.body1
    }
  }
});

function CustomCssBaseline() {
  return null;
}

CustomCssBaseline.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CustomCssBaseline);

import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import CustomCssBaseline from "./CustomCssBaseline";

function App() {
  return (
    <>
      <CssBaseline />
      <CustomCssBaseline />
      <span>
        This text within the body will now have the body1 styling applied by
        CustomCssBaseline.
      </span>
    </>
  );
}
ReactDOM.render(<App />, document.querySelector("#root"));

https://codesandbox.io/s/material-demo-vkl08?fontsize=14

Reference: https://material-ui.com/styles/advanced/#global-css

Answer 2

Here is an illustration of how you can customize the CssBaseline:

import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  "@global": {
    body: {
      ...theme.typography.body1
    }
  }
});

function CustomCssBaseline() {
  return null;
}

CustomCssBaseline.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CustomCssBaseline);

import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import CustomCssBaseline from "./CustomCssBaseline";

function App() {
  return (
    <>
      <CssBaseline />
      <CustomCssBaseline />
      <span>
        This text within the body will now have the body1 styling applied by
        CustomCssBaseline.
      </span>
    </>
  );
}
ReactDOM.render(<App />, document.querySelector("#root"));

https://codesandbox.io/s/material-demo-vkl08?fontsize=14

Reference: https://material-ui.com/styles/advanced/#global-css

Answer 3

Answer №2

Special thanks to @RyanCogswell for sharing their insights in this response. When using MUI v5, you can achieve the same effect with the following code:

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        h1 {
          color: grey;
        }
      `,
    },
  },
})

Alternatively, you can utilize the GlobalStyles component. More information can be found here:

https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override

Answer 4

Special thanks to @RyanCogswell for sharing their insights in this response. When using MUI v5, you can achieve the same effect with the following code:

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        h1 {
          color: grey;
        }
      `,
    },
  },
})

Alternatively, you can utilize the GlobalStyles component. More information can be found here:

https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override

Leveraging createMuiTheme to customize default styles for divs, paragraphs, and the body element

Answer №1

Answer №2

Similar questions

React PDF unable to display PDF files on IOS 15.5

Using CSS with multiple background images and the "contain" property

React Native is designed to easily stick an image to the bottom of the screen

Is there a way to prevent the second ul from appearing?

Modify the cursor pointer style in MUI Link using React

Background styling for TreeItems in Material-UI's TreeView

Tips for accurately relocating elements within a tooltip

Using the class for jQuery validation as opposed to the name attribute

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I

Use jQuery to smoothly scroll a div

Occasions focused on the <input type="file"> feature

Jquery Query: Is it possible to incorporate variables into CSS properties?

It appears that the font in style.css is not being updated properly and seems to resemble

In React, the clearInterval() function does not effectively clear intervals

The Role of Filling in a Process

Tips for arranging buttons horizontally in Angular

Maintain the basic structure while ensuring divs are properly aligned

Transferring Chart Div Titles Above Bars

Tips on deleting excess space in between Material-UI Grid Rows

Ways in which breakpoint.value can be utilized?