Reactjs 通过colorPrimary或colorSecondary更改材料ui芯片颜色

我正试图在没有太多运气的情况下，通过编程改变材质ui芯片的颜色。根据需要，您必须使用枚举中的三个值之一通过颜色属性设置颜色；默认值、主值和辅助值。然后，您应该能够覆盖colorPrimary或colorSecondary css类，并且背景颜色应该更改

下面是我的代码示例：

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

以及浏览器中元素的图片： 还不能在线：(

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

我尝试了这个变体，添加了colorBackground属性，但是我得到一个错误，说colorPrimary类需要字符串而不是对象

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

再次重申我的目标：我想对芯片应用十六进制代码颜色来改变背景颜色

---

任何信息都是有用的，谢谢！

您可以通过多种方式获取

可以直接添加样式

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

要在任何地方使用，您只需将

芯片

替换为

样式芯片

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

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

---

style={{{backgroundColor:{u thiscanbeviable}

对于那些试图在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;

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/Chip”导入材料芯片；
从“@material ui/core/styles”导入{withStyles}”；
常量芯片=（道具）=>{
const StyledChip=带样式({
根目录：{
“颜色”：“白色”，
“backgroundColor”：“${props.color}！重要”，
“&：悬停”：{
背景颜色：道具颜色，
过滤器：“亮度（120%）”，
},
“&：活动”：{
boxShadow：“无”，
背景颜色：道具颜色，
边框颜色：道具颜色，
},
},
概述：{
颜色：道具，颜色，
边框：`1px solid${props.color}`，
背景色：`透明！重要'，
},
图标：{
颜色：props.variant===‘轮廓’？props.color:‘白色’，
},
删除图标：{
颜色：props.variant===‘轮廓’？props.color:‘白色’，
},
})（材料工艺）；
返回；
};
Chip.propTypes={
颜色：PropTypes.string，
变体：PropTypes.oneOf（['regular，outlined']），
};
输出默认芯片；

非常感谢，我尝试过使用styles道具，但我不确定我使用的类名是否正确，我想我是在尝试colorPrimary覆盖颜色道具。谢谢！

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;