如何添加多个材质UI调色板颜色

Question

我正在尝试建立自己的调色板颜色以匹配Material UI中的品牌.到目前为止,我只能将主要和次要颜色作为按钮的背景颜色应用.当我添加自己的变量名称或使用"重音"时,如Material UI网站上的示例所示,按钮默认为灰色.

这是我的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

Material UI 调色板是可扩展的，但您需要执行一些操作来创建新颜色并将其应用到您的Button组件。

\n

首先，让\xe2\x80\x99s 定义一个带有自定义颜色变量的主题。您可以使用augmentColor()来生成 ，PaletteColor以便可以在您的 中使用它Button：

\n

import { purple } from "@mui/material/colors";\n\nconst { palette } = createTheme();\nconst theme = createTheme({\n  palette: {\n    myAwesomeColor: palette.augmentColor({ color: purple }),\n    // Use this code if you want to use an arbitrary color\n    // myAwesomeColor: palette.augmentColor({\n    //   color: {\n    //     main: "#00ff00"\n    //   }\n    // })\n  }\n});\n

\n

然后更新您的TypeScript 定义myAwesomeColor，以便在引用Palette和对象时它可以识别该属性PaletteOption（如果您使用的是 JavaScript，请跳过此步骤）。您还需要扩展Button\ 的颜色属性定义，因为默认情况下它只接受以下值：

\n

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

\n

declare module "@mui/material/styles" {\n  interface Palette {\n    myAwesomeColor: string;\n  }\n  interface PaletteOptions {\n    myAwesomeColor: string;\n  }\n}\n\ndeclare module "@mui/material/Button" {\n  interface ButtonPropsColorOverrides {\n    myAwesomeColor: true;\n  }\n}\n

\n

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

\n

<ThemeProvider theme={theme}>\n  <Button color="myAwesomeColor" variant="contained">\n    AWESOME\n  </Button>\n</ThemeProvider>\n

\n

现场演示

\n

\n

相关答案

\n

\n
• 更改 Material UI 中的主要颜色和次要颜色
\n

\n

Answer 2

除了需要将purple您的内容更改MyTheme为类似的内容外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>

这里的工作示例。