Question

我需要将Material UI图标转换为白色，因为背景是另一种颜色。

我正在从其核心颜色库中导入白色：

import { white } from '@material-ui/core/colors';

我可以这样做：

style={{ color: white }}

但是，我收到一条错误消息：

./src/components/footer.js
Attempted import error: 'white' is not exported from '@material-ui/core/colors'.

根据他们的docs，我看不到自己在做什么。我已经彻底研究了为什么会出现此错误但找不到解决方案。

Answer 1

从MaterialUI here

检查可用的调色板

白色不可用。

但是您可以使用'white'作为字符串，因为CSS的值是'white'

style={{ color: 'white' }}

可以找到here

CSS支持的颜色的完整列表。

Answer 2

@Sabbin 建议的一个好方法。但是，如果您想要 MaterialUI 中的类型化对象，则可以在 theme 中使用它。您可以在 theme explorer in the documentation 中找到更多相关信息。

例如：

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

export default function MyComponent() {
  const theme = useTheme();
  
  const whiteColor = theme.palette.common.white;
}

Answer 3

以下是您可以从material-ui导入的颜色列表：

export { default as amber } from './amber';
export { default as blue } from './blue';
export { default as blueGrey } from './blueGrey';
export { default as brown } from './brown';
export { default as common } from './common';
export { default as cyan } from './cyan';
export { default as deepOrange } from './deepOrange';
export { default as deepPurple } from './deepPurple';
export { default as green } from './green';
export { default as grey } from './grey';
export { default as indigo } from './indigo';
export { default as lightBlue } from './lightBlue';
export { default as lightGreen } from './lightGreen';
export { default as lime } from './lime';
export { default as orange } from './orange';
export { default as pink } from './pink';
export { default as purple } from './purple';
export { default as red } from './red';
export { default as teal } from './teal';
export { default as yellow } from './yellow';

来源是文件core/colors/index.d.ts

您会在列表中看到-白色不存在，因此无法导入。

如果您需要除上面列表中的颜色以外的其他颜色-您可以直接使用它而无需导入它（命名为color [“ white”，“ red” ...] / rgb [rgb（0，50， 150）] /十六进制[＃fe56fe]）。

Answer 4

这里是官方文档中的官方解决方案

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

const theme = createMuiTheme({
 palette: {
  primary: {
   light: '#757ce8',
   main: '#3f50b5',
   dark: '#002884',
   contrastText: '#fff',
           },
secondary: {
  light: '#ff7961',
  main: '#ffffff',
  dark: '#ba000d',
  contrastText: '#000',
           },
          },
         });

您可以将主要颜色从主要更改为'ffffff'

为什么不能从Material UI颜色中导入“白色”颜色？

4 个答案: