使用createMuiTheme覆盖div，p和body的默认样式

Z时代
2024-01-10
分类：问答

这也许是一个简单的“材质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>标签实际使用该样式？

回答：

这是一个覆盖以下方面的示例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"));