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

主题的几个部分（例如，调色板，breakpoints，间距，版式）具有与其相关联的附加处理，这些附加处理基于传入的选项在主题中创建附加条目。该附加处理仅应用于对象作为 first 参数传递给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>
  );
}

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 函数将生成向上和向下的函数，允许您检查代码中的断点，例如：

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

MaterialUi自定义断点未应用

2 个答案: