reactjs - Using createMuiTheme to override default styles on div's, p's, body

Question

Welcome To Ask or Share your Answers For Others

reactjs - Using createMuiTheme to override default styles on div's, p's, body

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

reactjs - Using createMuiTheme to override default styles on div's, p's, body

This is perhaps a simple Material UI Theme Customization question.

What I want to do is to override the default styling on <body> (and other common tags in the future). Right now 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'),
);

There's a theme that specifies some things but leaves out 'body1'

const theme = useTheme() and console.log(theme) shows that it is defined as:

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

This is the setting I want. However to use that setting I have to use the Typography tag with variant='body1'. Otherwise, text inside a div has styling provided by CssBaseline. That's the rule on the body tag: font-size: .875rem; which I wish to override.

Do people override styling provided by CssBaseline by using createMuiTheme? If so, I added:

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

Which shows up on console.log(theme), but how tell the <body> tag to actually use that style?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:25:51+0000

Here is an example of overriding this aspect of CssBaseline:

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

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

function MyCssBaseline() {
  return null;
}

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

export default withStyles(styles)(MyCssBaseline);

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

function App() {
  return (
    <>
      <CssBaseline />
      <MyCssBaseline />
      <span>
        Here is some text in the body that is getting the body1 styling due to
        MyCssBaseline.
      </span>
    </>
  );
}
ReactDOM.render(<App />, document.querySelector("#root"));

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

Categories

reactjs - Using createMuiTheme to override default styles on div's, p's, body

reactjs - Using createMuiTheme to override default styles on div's, p's, body

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags