使用createMuiTheme覆盖div,p,body上的默认样式

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (37)

这可能是一个简单的Material UI Theme Customization问题。

我想要做的是覆盖默认样式<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'。否则,内部的文本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"));

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

扫码关注云+社区

领取腾讯云代金券