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

Verifying the status of a checkbox label in Java using Selenium

Disabling trailing slash to false on a single page in Next.js: A step-by-step guide

How can I align two inner boxes vertically in the most efficient manner?

The state will remain unchanged until there is an external trigger

Styling TD with CSS for bottom border

Display One Div at a Time in Sequence on Page Load Using jQuery

Scrolling horizontally with scrollbar functionality

Mastering the Art of Utilizing $(this) in jQuery

Best method for retrieving information from a string

Internet Explorer 9 is not fully extending the width of the box for multiple select options

Upon triggering a GET request to the URL "http://localhost:3000/search", a "404 (Not Found)" error response was received. Interestingly

Enhanced Fancybox Version 2 adjusts iframe width to fit content

Issue with the dimensions and proportions of the canvas

Listening to React events on multiple elements in an array

Unable to precisely reach the very bottom of the scrollbar

Column-oriented and Slim-fit packaging

What is the best way to retrieve the id from a SelectField in material-ui with React?

What could be causing the error message "setShowModal is undefined" to appear in my React project?

Creating a multi-dimensional array using information from a database

What is the best way to achieve a smooth rotation effect ranging from 1° to 359° using HTML/CSS in conjunction with JavaScript