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

Question

使用 Material-UI v1：

我想创建多个不同颜色的按钮，这些按钮将来自 Material-UI 调色板。

理想情况下，我希望有类似的东西：

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

但我收到以下错误：

道具类型失败：提供给Button 的道具color 的价值someValue 无效，应为["default","inherit","primary","accent","contrast"] 之一。

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

Answer 1

您可以使用 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