如何添加多种Material UI调色板颜色 [英] How to add multiple Material UI palette colors

问题描述

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

I'm trying to establish my own palette colors to match my branding in Material UI. So far I can only get the primary and secondary colors to work when applied as the background color to buttons. When I add my own variable names or use "accent" as shown as an example from Material UI's website, the button defaults to grey.

这是我的MyTheme.js代码:

Here is my MyTheme.js code:

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代码:

Here is my App.js code:

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);

推荐答案

除了需要将MyTheme中的purple更改为类似purple[500]的东西外，我不确定为什么这不适用于你.确定要以这种方式覆盖primary和secondary以外的任何内容吗?

Other than needing to change purple in your MyTheme to be something like purple[500], I'm not sure why this wouldn't work for you. Are you sure you can override anything other than the primary and secondary in this way?

不管如何，这是一种解决方法:

Regardless, here's a workaround:

在MyTheme.js中:

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

然后在App.js中:

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

工作示例此处.

这篇关于如何添加多种Material UI调色板颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！