Почему я не могу импортировать "белый" цвет из цветов пользовательского интерфейса?

Question

Мне нужно преобразовать значок пользовательского интерфейса материала в белый, потому что фон - это другой цвет.

Я импортирую белый из библиотеки их основных цветов:

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'.

Я не могу видеть, что я делаю неправильно, на основании их документов . Я тщательно исследовал, почему я получаю эту ошибку, но не смог найти решение.

Answer 1

Проверьте доступную цветовую палитру из MaterialUI здесь

Белый недоступен.

Но вы можете использовать 'white' в качестве строки, поскольку CSS имеет значение 'white' в качестве значения

style={{ color: 'white' }}

Полный список цветов, поддерживаемых CSS, можно найти здесь

Answer 2

Вот список цветов, которые вы можете импортировать из 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

Как вы можете смотрите в списке - белого там нет, поэтому вы не можете его импортировать.

Если вам нужен другой цвет, чем тот, что в списке выше - вы можете просто использовать его напрямую, не импортируя его (named-color ["white", "red" ...] / rgb [rgb (0, 50, 150)] / hex [# fe56fe]).