Как использовать точки останова в самом определении темы

Question

Material-ui позволяет вам создать красивый Theme объект определения, чтобы переопределить внешний вид и дизайн материала по умолчанию. Однако, когда вы определяете тему, иногда необходимо иметь возможность создавать переопределение на основе точки останова (мобильный, marginTop равен 10, desktop, 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);