组件上 Material UI 的替代颜色答案

【问题标题】：Alternate colors of Material UI on components组件上 Material UI 的替代颜色
【发布时间】：2021-03-26 05:54:19
【问题描述】：

我的问题是关于材质ui的不同颜色的使用，例如：

主题原色有多种变体（100、200、300、400、500 等）。如何从我的组件中调用此颜色？

我试试这个：

<Button variant='contained' color='primary.100'>Button</Button>

但是不起作用...我尝试这样做是因为我想使用这个变体而不实现 css 或 makeStyles 来调用这个颜色

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

根据 Button 组件 here 的 API 文档，color 属性仅接受来自 'default' | 'inherit' | 'primary' | 'secondary' 的值。

您可以通过themes 管理或直接使用css 类（即root 类）来更改按钮颜色。检查codesandbox中的自定义按钮

【讨论】：

【解决方案2】：

你应该尝试看看这个：https://material-ui.com/customization/color/#playground

这将允许您在整个网站上更新和使用您的自定义颜色。

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

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

那么你应该可以像这样使用它：

<Button variant='contained' color='primary.light'>Button</Button>

【讨论】：

请至少添加与答案相关的内容，然后尝试参考。
完成了。感谢@ApoorvaChikara 的评论