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

Question

我正在尝试建立自己的调色板颜色以匹配我在 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);

Answer 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

Answer 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。