为何无法从Material UI核心颜色库导入white？图标改白遇报错

嘿，我遇到过类似的问题，这就来帮你搞定！你之所以会收到Attempted import error: 'white' is not exported from '@material-ui/core/colors'这个报错，是因为Material UI的颜色库并没有直接导出white这个单独变量——白色和黑色这类基础色是被归类在common对象里的。

给你几个可行的解决方案：

• 方案一：导入common对象调用白色值
  这是符合Material UI颜色规范的用法，把代码改成这样：

  import { common } from '@material-ui/core/colors';
  
  // 在组件中使用
  <YourIcon style={{ color: common.white }} />
  

• 方案二：直接使用十六进制白色值
  如果不想额外导入模块，直接写白色的十六进制值更简单，效果完全一样：

  <YourIcon style={{ color: '#ffffff' }} />
  

• 方案三：通过主题对象获取白色值（推荐在使用Theme时用）
  如果你项目里用到了Material UI的主题系统，可以直接从主题的调色板中获取白色，这样能和整体主题保持统一：

  import { makeStyles } from '@material-ui/core/styles';
  
  const useStyles = makeStyles((theme) => ({
    icon: {
      color: theme.palette.common.white,
    },
  }));
  
  // 组件里调用样式
  <YourIcon className={classes.icon} />
  

之前你对照官方文档没发现问题，大概率是没留意到基础色被放在common分类下——Material UI的颜色库只把红、蓝这类主题色单独导出，黑白这类通用色都在common对象里哦。

内容的提问来源于stack exchange，提问作者aixecador