具有不同调色板颜色的样式按钮

时间:2017-10-03 19:12:08

标签: reactjs material-ui

使用Material-UI v1:

我想创建多个不同颜色的按钮,这些按钮将从Material-UI调色板中获取。

理想情况下,我希望有类似的东西:

<Button color="colorFromThePalette">
<Button color={ theme.palette.myColor }>

但是我收到以下错误:

  

道具类型失败:提供给color的值someValue的道具Button无效,预期为[“默认”,“继承”,“主要”,“重音”,“对比度“]。

考虑到我希望与材料设计调色板保持一致,我有哪些选择?

1 个答案:

答案 0 :(得分:3)

您可以使用 classes 属性并仅覆盖所需的键。对我来说, flatPrimary raisedPrimary 就够了。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { fade } from 'material-ui/styles/colorManipulator';
import teal from 'material-ui/colors/teal';
import Button from 'material-ui/Button';

const styles = theme => ({
  flatTeal: {
    color: teal[500],
    '&:hover': {
      backgroundColor: fade(teal[500], 0.12)
    }
  },
  raisedTeal: {
    backgroundColor: teal[500],
    '&:hover': {
      backgroundColor: teal[700],
      '@media (hover: none)': {
        backgroundColor: teal[500]
      }
    }
  }
});

const Teal = props => {
  const { classes } = props;

  return (
    <div>
      <Button color="primary">
        Primary flat
      </Button>
      <Button raised color="primary">
        Primary raised
      </Button>
      <Button
        color="primary"
        classes={{ flatPrimary: classes.flatTeal }}
      >
        Teal flat
      </Button>
      <Button
        raised
        color="primary"
        classes={{ raisedPrimary: classes.raisedTeal }}
      >
        Teal raised
      </Button>
    </div>
  );
};

Teal.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Teal);

https://codesandbox.io/s/v8r33xnlr5