如何在主题定义本身中使用断点

Question

Material-ui允许您创建一个不错的Theme定义对象，以覆盖默认的Material Design外观。但是，定义主题时，有时必须能够创建基于断点的覆盖（移动，marginTop为10，桌面，marginTop为5）。

关于如何执行此操作的任何想法。显然，由于尚未定义主题，因此您无权访问theme引用和通过该theme.breakpoints

Answer 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);