未应用 Material Ui 自定义断点

Question

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

我有共同的部分，比如

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

为了有效地覆盖默认 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'))

Answer 2

主题的几个部分（例如调色板、breakpoints、间距、排版）具有与之关联的附加处理，根据传入的选项在主题中创建附加条目。此附加处理仅应用于传递的对象作为createMuiTheme 的第一个 参数。任何附加参数都是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>
  );
}