Question

我试图以编程方式更改Material-ui芯片的颜色，但运气不佳。根据{{3}}，您必须通过color prop使用枚举中的三个值之一来设置颜色。默认，主要和次要。然后，您应该可以覆盖colorPrimary或colorSecondary css类，并且背景色也应更改。

这是我的代码示例：

<Chip key={label.id} color='primary' classes={{ colorPrimary: label.color }} label={label.label} />

以及浏览器中元素的图片： Chip Api还不能内联：（

如果您查看选定的元素，您将看到我尝试应用的正确颜色＃ff0000，因此它可以获取颜色并将其放置在某处。

我尝试了这种变体，添加了colorBackground属性，但是我收到一条错误消息，说colorPrimary类期望使用字符串而不是对象

<Chip key={label.id} color='primary' classes={{ colorPrimary: { backgroundColor: label.color } }} label={label.label} />

再次重申我的目标：我想将十六进制代码颜色应用于芯片以更改背景颜色。

任何信息都是有帮助的，谢谢！

Answer 1

您可以通过多种方式实现它。

您可以直接添加样式

<Chip key={label.id} color='primary' style={{backroundColor:'green'}} label={label.label} />

或者您可以覆盖该类：

const StyleChip = withStyles({
  root: {
    backgroundColor:'salmon'
  }
})(Chip);

要在任何地方使用，您只需将Chip替换为StyleChip

<StyleChip key={label.id} color='primary' label={label.label} />

但是如果您想通过编程设置颜色，第一种方法是完美的，因为

style={{backgroundColor:_thisCanBeVariable_}}

Answer 2

对于那些试图在 v5 之前获得它的人（需要向调色板添加新颜色），一个简单的包装器将完成工作：

import React from 'react';
import PropTypes from 'prop-types';
import MaterialChip from '@material-ui/core/Chip';
import { withStyles } from '@material-ui/core/styles';

const Chip = (props) => {
    const StyledChip = withStyles({
        root: {
            'color': 'white',
            'backgroundColor': `${props.color} !important`,
            '&:hover': {
                backgroundColor: props.color,
                filter: 'brightness(120%)',
            },
            '&:active': {
                boxShadow: 'none',
                backgroundColor: props.color,
                borderColor: props.color,
            },
        },
        outlined: {
            color: props.color,
            border: `1px solid ${props.color}`,
            backgroundColor: `transparent !important`,
        },
        icon: {
            color: props.variant === 'outlined' ? props.color : 'white',
        },
        deleteIcon: {
            color: props.variant === 'outlined' ? props.color : 'white',
        },
    })(MaterialChip);

    return <StyledChip {...props} />;
};

Chip.propTypes = {
    color: PropTypes.string,
    variant: PropTypes.oneOf(['regular, outlined']),
};

export default Chip;

通过colorPrimary或colorSecondary

2 个答案:

通过colorPrimary或​​colorSecondary

2 个答案:

通过colorPrimary或colorSecondary