未应用MaterialUi自定义断点 [英] MaterialUi custom breakpoints not applied

问题描述

基于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内(即不在主题的一侧)，则会应用正确的断点。我错过了什么吗？如果最终主题对象具有相同的结构，为什么它的工作方式不同？

推荐答案

主题的几个部分(例如调色板、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>
  );
}

这篇关于未应用MaterialUi自定义断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！