使用createMuiTheme覆盖div,p和body的默认样式 [英] Using createMuiTheme to override default styles on div's, p's, body
问题描述
这可能是一个简单的材质UI主题自定义"问题.
This is perhaps a simple Material UI Theme Customization question.
我想做的是覆盖<body>
上的默认样式(以及将来的其他常见标签).现在在我的React树的根目录:
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'),
);
有一个主题,它指定了一些内容,但省略了'body1'
There's a theme that specifies some things but leaves out '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;
,我想覆盖它.
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.
人们是否通过使用createMuiTheme覆盖CssBaseline提供的样式?如果是这样,我添加:
Do people override styling provided by CssBaseline by using createMuiTheme? If so, I added:
body: {
fontSize: '1rem',
},
哪个出现在console.log(theme)
上,但是如何告诉<body>
标签实际使用该样式?
Which shows up on console.log(theme)
, but how tell the <body>
tag to actually use that style?
推荐答案
以下是覆盖CssBaseline
这方面的一个示例:
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"));
参考: https://material-ui.com/styles/advanced/#global-css
这篇关于使用createMuiTheme覆盖div,p和body的默认样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!