IT技术 - 如何添加自定义 MUI 调色板颜色 - 吾爱随笔录

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

IT技术 reactjs themes material-ui

2021-04-03 01:49:30

我正在尝试建立我自己的调色板颜色以匹配我在 Material-UI 中的品牌。到目前为止，我只能在将主要颜色和辅助颜色用作按钮的背景颜色时才能起作用。当我添加自己的变量名称时，如使用“accent”，如 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);

2个回答

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

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

在MyTheme.js：

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

然后在App.js：

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

工作示例在这里。

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

2021-05-27 01:49:30

谢谢！我查看了您的示例，并且我的自定义彩色变量有效。对于任何看这篇文章的人，答案如下：<Button style={MyTheme.palette.companyRed} >

2021-06-03 01:49:30

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

2021-06-09 01:49:30

当然，但purple由于它是一个对象，因此无效。

2021-06-11 01:49:30

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

2021-06-12 01:49:30

MUI 调色板可以是可扩展的，但是您需要做一些事情来创建新颜色并应用于您的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定义，以便它可以myAwesomeColor在引用Palette和PaletteOption对象时识别该属性（如果您使用的是 JS，请跳过此步骤）。您还需要扩展Button的颜色props定义，因为默认情况下它只接受以下值：

'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>

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

现场演示

相关回答