如何添加自定义 MUI 调色板颜色

Posted 2023-02-19

【中文标题】如何添加自定义 MUI 调色板颜色

【英文标题】：How to add custom MUI palette colors

【发布时间】：2018-10-08 17:33:20

【问题描述】：

我正在尝试建立自己的调色板颜色以匹配我在 Material-UI 中的品牌。到目前为止，当用作按钮的背景颜色时，我只能使主要颜色和次要颜色起作用。当我添加自己的变量名称时，如 Material-UI 网站上的示例所示，使用“accent”，按钮默认为灰色。

这是我的MyTheme.js 代码：

import  createMuiTheme  from 'material-ui/styles';
import purple from 'material-ui/colors/purple';

export default createMuiTheme(
    palette: 
        primary:  // works
          main: '#165788',
          contrastText: '#fff',
        ,
        secondary:  // works
          main: '#69BE28',
          contrastText: '#fff',
        ,
        companyBlue:  // doesnt work - defaults to a grey button
            main: '#65CFE9',
            contrastText: '#fff',
        ,
        companyRed:  // doesnt work - grey button
            main: '#E44D69',
            contrastText: '#000',
        ,
        accent:  // doesnt work - grey button
            main: purple, // import purple doesnt work
            contrastText: '#000',
        ,
    ,
);

这是我的App.js 代码：

import React,  Component  from 'react';
import Button from 'material-ui/Button';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyTheme from './MyTheme';
import './App.css';
import  withStyles  from 'material-ui/styles';
import PropTypes from 'prop-types';


const styles = theme => (
  button: 
    margin: theme.spacing.unit,
  ,
  input: 
    display: 'none',
  ,
);


class App extends Component 
  constructor(props)
  
    super(props);
    
 
  render() 
    const  classes  = this.props;
    return (
      <MuiThemeProvider theme=MyTheme>
          <Button variant="raised" >
          Default
          </Button>
          <Button variant="raised" color="primary" className=classes.button>
          Primary
          </Button>
          <Button variant="raised" color="secondary" className=classes.button>
          Secondary
          </Button>
          <Button variant="raised" color="companyRed" className=classes.button>
          Company Red
          </Button>
          <Button variant="raised" color="accent" className=classes.button>
          Accent
          </Button>
      </MuiThemeProvider>
      );
  


App.propTypes = 
  classes: PropTypes.object.isRequired,
;

export default withStyles(styles)(App);

【问题讨论】：

这很奇怪。不确定你所说的“紫色”是什么意思不起作用，但你应该有例如purple[500] 或您的 MyTheme 中的任何内容。

【参考方案1】：

MUI 调色板可以是extendable，但您需要做一些事情来创建新颜色并将其应用于您的Button 组件。

首先，让我们用自定义颜色变量定义一个主题。您可以使用augmentColor() 生成PaletteColor，以便在您的Button 中使用它：

import  purple  from "@mui/material/colors";

const  palette  = createTheme();
const theme = createTheme(
  palette: 
    myAwesomeColor: palette.augmentColor( color: purple ),
    // Use this code if you want to use an arbitrary color
    // myAwesomeColor: palette.augmentColor(
    //   color: 
    //     main: "#00ff00"
    //   
    // )
  
);

然后更新您的typescript definition，以便它可以在引用Palette 和PaletteOption 对象时识别属性myAwesomeColor（如果您使用的是JS，请跳过此步骤）。您还需要扩展Button 的颜色道具定义，因为默认情况下only accepts 具有以下值：

'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'

declare module "@mui/material/styles" 
  interface Palette 
    myAwesomeColor: string;
  
  interface PaletteOptions 
    myAwesomeColor: string;
  


declare module "@mui/material/Button" 
  interface ButtonPropsColorOverrides 
    myAwesomeColor: true;
  

最后一步是注入自定义主题并为您的Button 设置自定义颜色：

<ThemeProvider theme=theme>
  <Button color="myAwesomeColor" variant="contained">
    AWESOME
  </Button>
</ThemeProvider>

现场演示

相关答案

Change primary and secondary colors in MUI

【讨论】：

从@mui/material/styles 访问styled 函数回调中的自定义属性时，这对我有用。相反，当我通过来自@mui/material/styles 的“useTheme”钩子的返回值访问它时，我得到一个“属性不存在”。有什么提示吗？ ://

@Jota.Toledo 类似于this的回答，把使用useTheme的组件放在ThemeProvider里​​面。请参阅我更新的代码框以供参考。

【参考方案2】：

除了需要将MyTheme 中的purple 更改为purple[500] 之类的东西外，我不确定为什么这对您不起作用。您确定可以通过这种方式覆盖除primary 和secondary 之外的任何内容吗？

无论如何，这里有一个解决方法：

在MyTheme.js:

accent:  backgroundColor: purple[500], color: '#000' 

然后在App.js:

<Button 
  variant="raised" 
  style=MyTheme.palette.accent 
  className=classes.primary>
    Accent
</Button>

工作示例here。

【讨论】：

嘿 Colin，我需要自己的变量来处理十六进制颜色。紫色只是一个测试。

当然，但是purple 无效，因为它是一个对象。

谢谢！我查看了您的示例，并且我的自定义颜色变量有效。对于查看此帖子的任何人，答案如下：

酷，如果它对你有用，请标记为正确:)

并在您的主题文件中将 main 更改为 backgroundColor 并将 contrastText 更改为 color。