Question

我已经使用 Material UI 配置了我的主题，但是我遇到了一个我不清楚的错误。因为这个没有显示在我的 IDE 中，而只显示在浏览器中。

<块引用>

TypeError: can't access property "fontWeightBold", theme.typography is 未定义

  37 |   boxSizing: 'inherit'
  38 | },
  39 | 'strong, b': {
> 40 |   fontWeight: theme.typography.fontWeightBold
     | ^  41 | },
  42 | body: _extends({
  43 |   margin: 0

和

<块引用>

类型错误：无法访问属性 100，theme.palette.grey 未定义

  37 |   boxSizing: 'inherit'
  38 | },
  39 | 'strong, b': {
> 40 |   fontWeight: theme.typography.fontWeightBold
     | ^  41 | },
  42 | body: _extends({
  43 |   margin: 0

这些错误直接来自 Material UI 的核心组件

这是主题文件夹的树状结构。

src/theme
├── ThemeProvider.tsx
├── colors.ts
├── index.ts
├── typography.ts
└── variants
    ├── dark.ts
    └── light.ts

我与您分享我当前的代码。

// ThemeProvider.tsx

import React, { useState } from 'react';
import { ThemeProvider } from "@material-ui/core/styles";
import { appTheme } from './index';


export const ThemeContext = React.createContext((themeName: string): void => {});

const AppThemeProvider: React.FC = (props) => {
  // Read current theme from localStorage or maybe from an api
  const curThemeName = localStorage.getItem("appTheme") || "lightTheme";

  // State to hold the selected theme name
  // eslint-disable-next-line @typescript-eslint/naming-convention
  const [themeName, _setThemeName] = useState(curThemeName);

  // Get the theme object by theme name
  const theme = appTheme(themeName);

  // eslint-disable-next-line @typescript-eslint/no-shadow
  const setThemeName = (themeName: string): void => {
    localStorage.setItem("appTheme", themeName);
    _setThemeName(themeName);
  }

  return (
    <ThemeContext.Provider value={setThemeName}>
      {/* eslint-disable-next-line react/prop-types */}
      <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
    </ThemeContext.Provider>
  );
}

export default AppThemeProvider;

// index.ts

import {Theme} from "@material-ui/core";
import {darkTheme} from "./variants/dark";
import {lightTheme} from "./variants/light";

const themeMap: { [key: string]: Theme } = {
  lightTheme,
  darkTheme
};

export function appTheme(theme: string): Theme {
  return themeMap[theme];
}

深色和浅色主题相似，只是颜色不同

// dark.ts

import {createTheme} from "@material-ui/core";
import {AppColors} from "../colors";
import typography from "../typography";

export const darkTheme = createTheme({
  palette: {
    primary: {
      main: AppColors.WHITE,
      contrastText: AppColors.BLACK
    }
  },
  typography
});

还有排版：

import {ThemeOptions} from "@material-ui/core";

const typography: ThemeOptions['typography'] = {
  fontFamily: [
    "Circular Std",
    "Roboto"
  ].join(","),
  fontSize: 13,
  fontWeightLight: 300,
  fontWeightRegular: 400,
  fontWeightMedium: 500,
  fontWeightBold: 700,
  h1: {
    fontSize: "5rem",
    fontWeight: 700,
    lineHeight: 1.25,
  },
  h2: {
    fontSize: "3.75rem",
    fontWeight: 700,
    lineHeight: 1.25,
  },
  h3: {
    fontSize: "2.125rem",
    fontWeight: 700,
    lineHeight: 1.25,
  },
  h4: {
    fontSize: "1.3125rem",
    fontWeight: 500,
    lineHeight: 1.25,
  },
  h5: {
    fontSize: "1.0625rem",
    fontWeight: 500,
    lineHeight: 1.25,
  },
  h6: {
    fontSize: "1rem",
    fontWeight: 500,
    lineHeight: 1.25,
  },
  body1: {
    fontSize: 13,
  },
  button: {
    textTransform: "none",
  },
};

export default typography;

有没有人遇到过这个错误？

MaterialUI - CssBaseline：Strong/B 标签字体粗细

0 个答案: