未应用 Material Ui 自定义断点

Question

基于问题，我尝试了一个使用通用配置文件的主题（其他主题也应该使用）。所以我认为断点是一个很好的起点，因为它们在所有主题中都应该相同。

我有共同的部分

const BREAKPOINTS = {
  xs: 0,
  sm: 768,
  md: 960,
  lg: 1280,
  xl: 1920,
};

const commonConstants = {
  breakpoints: {
    values: BREAKPOINTS,
  },
};

export default commonConstants;

然后我创建我的主题

const defaultTheme = responsiveFontSizes(createMuiTheme(myTheme, commonConstants));

如果我 console.log 我的主题对象，它将显示正确的断点值但不会应用它们（将应用默认值）。但是，如果 breakpoint 对象直接添加到主题对象 myTheme 中（即不使用主题），则会应用正确的断点。我在这里错过了什么？如果最终的主题对象具有相同的结构，为什么它的工作方式不同？

Answer 1

主题的几个部分（例如调色板，breakpoints, spacing, typography) have additional processing associated with them that creates additional entries in the theme based on the options passed in. This additional processing is only applied to the object passed as the first argument to createMuiTheme. Any additional arguments are merged in after附加处理。

对于断点，额外的处理包含在 createBreakpoints function 中。这将创建各种利用断点值的函数（例如 theme.breakpoints.up、theme.breakpoints.down 等）。当您通过第二个参数传入自定义断点值时，这些值不会用于创建这些断点函数。

解决这个问题有两个主要选项。

选项 1：自行应用附加处理

import { createMuiTheme } from "@material-ui/core/styles";
import createBreakpoints from "@material-ui/core/styles/createBreakpoints";

const BREAKPOINTS = {
  xs: 0,
  sm: 768,
  md: 960,
  lg: 1280,
  xl: 1920
};

const breakpointsFull = {
  breakpoints: createBreakpoints({
    values: BREAKPOINTS
  })
};
const myTheme = { other: "stuff" };
const theme = createMuiTheme(myTheme, breakpointsFull);

选项 2：将您的自定义断点值合并到 createMuiTheme

的第一个参数中

import { createMuiTheme } from "@material-ui/core/styles";

const BREAKPOINTS = {
  xs: 0,
  sm: 768,
  md: 960,
  lg: 1280,
  xl: 1920
};

const breakpointsValues = {
  breakpoints: {
    values: BREAKPOINTS
  }
};

const myTheme = { other: "stuff" };
const theme = createMuiTheme({ ...myTheme, ...breakpointsValues });

这里有一个工作示例，展示了您当前方法以及两种替代方法的问题：

import React from "react";
import { createMuiTheme } from "@material-ui/core/styles";
import createBreakpoints from "@material-ui/core/styles/createBreakpoints";

const BREAKPOINTS = {
  xs: 0,
  sm: 768,
  md: 960,
  lg: 1280,
  xl: 1920
};

const breakpointsValues = {
  breakpoints: {
    values: BREAKPOINTS
  }
};
const breakpointsFull = {
  breakpoints: createBreakpoints({
    values: BREAKPOINTS
  })
};
const myTheme = { other: "stuff" };
const badTheme = createMuiTheme(myTheme, breakpointsValues);
const goodTheme1 = createMuiTheme(myTheme, breakpointsFull);
const goodTheme2 = createMuiTheme({ ...myTheme, ...breakpointsValues });
export default function App() {
  return (
    <ul>
      <li>badTheme.breakpoints.values.sm: {badTheme.breakpoints.values.sm}</li>
      <li>badTheme.breakpoints.up("sm"): {badTheme.breakpoints.up("sm")}</li>
      <li>
        goodTheme1.breakpoints.values.sm: {goodTheme1.breakpoints.values.sm}
      </li>
      <li>
        goodTheme1.breakpoints.up("sm"): {goodTheme1.breakpoints.up("sm")}
      </li>
      <li>
        goodTheme2.breakpoints.values.sm: {goodTheme2.breakpoints.values.sm}
      </li>
      <li>
        goodTheme2.breakpoints.up("sm"): {goodTheme2.breakpoints.up("sm")}
      </li>
    </ul>
  );
}

Answer 2

为了有效地覆盖默认 MuiTheme 中的断点（如 Ryan Cogswell 回答选项 1 所示），您必须使用传入值和键元素的 createBreakpoints 函数。

根据 Ryan 的回答，我发现以下解决方案可行。

import { createMuiTheme } from "@material-ui/core/styles";
import createBreakpoints from "@material-ui/core/styles/createBreakpoints";

const BREAKPOINTS = {
  xs: 0,
  sm: 768,
  md: 960,
  lg: 1280,
  xl: 1920
};

const breakpointsFull = createBreakpoints({
    values: {...BREAKPOINTS},
    keys: Object.keys(BREAKPOINTS),
  });

const myTheme = { other: "stuff" };
const theme = createMuiTheme({ 
   default: myTheme, 
   breakpoints: breakpointsFull,
});

此策略可以轻松修改 BREAKPOINTS 变量，并将其正确分配给对象。使用 createBreakpoints Mui 函数将生成 up 和 down 函数，这允许您检查代码中的断点，例如：

const isSmallScreen = UseMediaQuery(theme.breakpoints.down('sm'))

未应用 Material Ui 自定义断点

MaterialUi custom breakpoints not applied

themes

reactjs

material-ui