Why can't I import "white" color from Material UI colors?

Check available color palette from MaterialUI here

White is not available.

But you can use 'white' as string, as CSS has 'white' as value

style={{ color: 'white' }}

A complete list of colors supported by CSS can be found here

A good approach is what @Sabbin suggested. But if you want a typed object from MaterialUI, it's available in the theme. You can find more about this in the theme explorer in the documentation.

For example:

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

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

Here is the list of the colors that you can import from 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';

Source is the file core/colors/index.d.ts

As you can see in the list, white is not there, so you can't import it.

If you need a color other than the ones in the list above, you can just use it directly without importing it as:

• a named-color, eg. ["white", "red", ...]
• an rgb color, eg. [rgb(0, 50, 150)]
• a hex color, eg. [#fe56fe]

Here is official solution from official documentation

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',
           },
          },
         });

You can change main color from primary and set it to 'ffffff'

You should import it from the common file

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