IT技术 - 使用 createMuiTheme 覆盖 div、p、body 上的默认样式 - 吾爱随笔录

这可能是一个简单的 Material UI 主题自定义问题。

我想要做的是覆盖默认样式<body>（以及将来的其他常见标签）。现在在我的 React 树的根部：

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

有一个主题指定了一些东西但遗漏了 'body1'

const theme = useTheme()并console.log(theme)表明它被定义为：

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

这是我想要的设置。但是要使用该设置，我必须使用Typography带有variant='body1'. 否则， a 中的文本div具有由CssBaseline. 这是body标签上的规则：font-size: .875rem;我希望覆盖它。

人们是否使用 createMuiTheme 覆盖 CssBaseline 提供的样式？如果是这样，我补充说：

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

哪个显示在上console.log(theme)，但是如何告诉<body>标签实际使用该样式？

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