这可能是一个简单的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
这就是我想要的设置。但是,要使用该设置,我必须对variant='body1'
使用Typography
标记。否则,div
中的文本具有由CssBaseline
提供的样式。这就是我希望覆盖的body
标记:font-size: .875rem;
上的规则。
人们会通过使用createMuiTheme来覆盖CssBaseline提供的样式吗?如果是这样的话,我补充道:
body: {
fontSize: '1rem',
},
它显示在console.log(theme)
上,但是如何告诉<body>
标记实际使用这种样式呢?
发布于 2019-06-05 03:38:52
下面是一个覆盖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://stackoverflow.com/questions/56448538
复制相似问题