使用Material-UI v1:
我想创建多个不同颜色的按钮,这些按钮将从Material-UI调色板中获取。
理想情况下,我希望有类似的东西:
<Button color="colorFromThePalette">
<Button color={ theme.palette.myColor }>
但是我收到以下错误:
道具类型失败:提供给
color
的值someValue
的道具Button
无效,预期为[“默认”,“继承”,“主要”,“重音”,“对比度“]。
考虑到我希望与材料设计调色板保持一致,我有哪些选择?
答案 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);