Reactjs MaterialUi自定义断点未应用

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

我有共同点，比如

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

---

如果I console.log我的主题对象，它将显示正确的断点值，但不会应用它们（将应用默认值）。但是，如果将

断点

对象直接添加到主题对象

myteme

中（即不使用主题），则会应用正确的断点。我错过了什么？如果最终的主题对象具有相同的结构，为什么会有不同的工作方式？

主题的多个部分（例如调色板、间距、排版）具有与之相关联的附加处理，从而根据传入的选项在主题中创建附加条目。此附加处理仅应用于作为

createMuiTheme

的第一个参数传递的对象。任何附加参数都是附加处理

对于断点，该附加处理包含在中。这将创建利用断点值的各种函数（例如，

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

从“React”导入React；
从“@material ui/core/styles”导入{createMuiTheme}”；
从“@material ui/core/styles/createBreakpoints”导入createBreakpoints；
常量断点={
xs:0,，
sm:768，
md:960，
lg:1280，
xl:1920
};
常量断点值={
断点：{
值：断点
}
};
常量断点full={
断点：创建断点({
值：断点
})
};
const myTheme={other:“stuff”}；
const badTheme=createMuiTheme（myTheme，断点值）；
const goodTheme1=createMuiTheme（myteme，断点full）；
const goodTheme2=createMuiTheme（{…myteme，…breakpointsValues}）；
导出默认函数App（）{
返回(

badTheme.breakpoints.values.sm:{badTheme.breakpoints.values.sm}
badTheme.breakpoints.up（“sm”）：{badTheme.breakpoints.up（“sm”）}

goodTheme1.breakpoints.values.sm:{goodTheme1.breakpoints.values.sm}


goodTheme1.breakpoints.up（“sm”）：{goodTheme1.breakpoints.up（“sm”）}


goodTheme2.breakpoints.values.sm:{goodTheme2.breakpoints.values.sm}


goodTheme2.breakpoints.up（“sm”）：{goodTheme2.breakpoints.up（“sm”）}


);
}

---

为了有效覆盖默认MuiTheme中的断点（如回答选项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（主题.断点.关闭（'sm'））