Material-ui 允许您创建一个很好的Theme定义对象来覆盖默认的 Material Design 外观和感觉。但是，当您定义主题时，有时需要能够创建基于断点的覆盖（移动设备，marginTop 为 10，桌面，marginTop 为 5）。
关于如何做到这一点的任何想法。显然，由于 Theme 尚未定义，您无权访问theme引用并通过它theme.breakpoints
如何在主题定义本身中使用断点
IT技术
reactjs
material-ui
2021-05-08 18:18:16
1个回答
您可以创建默认主题（createMuiTheme不带任何参数），然后使用该主题访问断点以在您的自定义主题中使用。
下面是一个例子：
import React from "react";
import ReactDOM from "react-dom";
import Typography from "@material-ui/core/Typography";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
typography: {
h4: {
fontSize: "0.5rem",
"&:after": {
content: '" mobile"'
},
[defaultTheme.breakpoints.up("sm")]: {
fontSize: "1.5rem",
"&:after": {
content: '" sm up"'
}
},
[defaultTheme.breakpoints.up("md")]: {
fontSize: "3rem",
"&:after": {
content: '" md up"'
}
}
}
}
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<div className="App">
<Typography variant="h4">Here is some h4 text.</Typography>
</div>
</MuiThemeProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
