Material-UI v1：使用自定义颜色进行主题配置

IT技术 reactjs material-ui
2021-05-01 09:13:34

这应该是一件非常简单的事情，但我对 material-ui 还很陌生。我正在使用 material-ui v1 并且我正在尝试更改主题的主要颜色。这是我的主题对象在不使用自定义颜色的情况下的样子：

import { createMuiTheme } from 'material-ui-next/styles';
import blue from 'material-ui-next/colors/purple';
import green from 'material-ui-next/colors/green';
import red from 'material-ui-next/colors/red';


const theme = createMuiTheme({
    palette: {
        primary: green, 
        secondary: {
          ...green,
         },
       error: red,
     },
});


export default theme;

在原色中，我想使用我的自定义颜色“#6699CC”。如果我分配主要：'#6699CC'，它会给我以下错误：

“Material-UI：原色缺少以下色调：50,100,200,300,400,500,600,700,800,900,A100,A200,A400,A700,contrastDefaultColor 查看默认颜色，靛蓝或粉红色，如从材料中导出的@ui80js：警告370js。 ”

这用于在 0.19 beta 版本中工作，但它不适用于 V1-beta。任何人都可以帮我解决这个问题吗？

3个回答

检查Color 的文档。您需要在选择我认为的颜色时设置色调。

import { red, purple } from 'material-ui/colors';

const primary = red[500]; // #F44336
const accent = purple['A200']; // #E040FB

更新： 正如我从文档中读到的，您可能需要将色调和颜色值设置在一起，以便 material-ui 可以知道它需要呈现哪种颜色。

尝试根据下面的 JSON 对象设置您的主要颜色。

{
    primary: {
      50: "#e3f2fd",
      100: "#bbdefb",
      200: "#90caf9",
      300: "#64b5f6",
      400: "#42a5f5",
      500: "#2196f3",
      600: "#1e88e5",
      700: "#1976d2",
      800: "#1565c0",
      900: "#0d47a1",
      A100: "#82b1ff",
      A200: "#448aff",
      A400: "#2979ff",
      A700: "#2962ff",
      contrastDefaultColor: "light"
    }
}

PS：您正在尝试import blue从/colors/purple

这在我自己的项目中对我有用。Material ui 可以为您制作调色板色调，只需提供您想要使用的颜色的明/主/暗属性。见https://material-ui.com/style/color/

import { createMuiTheme } from '@material-ui/core/styles';
import { yellow, orange } from '@material-ui/core/colors';

const muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#ea212d',
    },
    secondary: yellow,
    error: orange,
  },
  typography: {
    fontFamily:
        'roboto, sans-serif',
  },
});

export default muiTheme;

从文档：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#ff4400',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    }
  }
}
其它你可能感兴趣的问题
上一篇将 React App 拆分为 2 个独立的部分 下一篇关闭请求不适用于对话框