未應用 MaterialUi 自定義斷點

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 我的主題 object，它將顯示正確的斷點值但不會應用它們（將應用默認值）。 但是，如果breakpoint object 直接添加到主題 object myTheme中（即不使用主題），則會應用正確的斷點。 我在這里想念什么？ 如果最終主題 object 具有相同的結構，為什么它的工作方式不同？

Answer 1

主題的幾個部分（例如調色板、 斷點、間距、排版）具有與之關聯的附加處理，根據傳入的選項在主題中創建附加條目。這種附加處理僅適用於作為第一個參數傳遞給createMuiTheme 。 任何附加的 arguments 在附加處理后合並。

對於斷點，該附加處理包含在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 function 傳遞值和鍵元素。

根據 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 變量，並將其正確分配給 object。 使用 createBreakpoints Mui function 將生成 up 和 down 函數，允許您檢查代碼中的斷點，例如：

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