有没有办法改变Chip的点击颜色

Question

我正在尝试更改芯片组件的单击颜色，而不更改我的

theme.js

。

我尝试使用

classes

覆盖和我需要的颜色，但它仍然将其更改为主要/次要颜色。我在实现

中找到了这部分

[...]
 /* Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. */
    clickableColorPrimary: {
      '&:hover, &:focus': {
        backgroundColor: emphasize(theme.palette.primary.main, 0.08),
      },
    },
/* Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */
clickableColorSecondary: {
      '&:hover, &:focus': {
        backgroundColor: emphasize(theme.palette.secondary.main, 0.08),
      },
    },
[...]

我想知道是否有办法克服这个......

我对

classes

覆盖的尝试看起来像这样，

<Chip
    classes={{
        ColorSecondary: '#00d799',
        ColorPrimary: '#ffb34b',
    }}
    color={!clicked ? 'primary' : 'secondary'}
    size="small"
    label={`${clicked ? 'Copied!' : 'Copy'}`}
    onClick={() => setClicked(!clicked)}
/>

但这并没有帮助。

编辑：

我已经根据 Fred A comment更新了我的代码：

<Chip
    classes={{
        colorPrimary: classes.overrideColorPrimary,
        colorSecondary: classes.overrideColorSecondary,
    }}
    color={!clicked ? 'primary' : 'secondary'}
    size="small"
    label={`${clicked ? 'Copied!' : 'Copy'}`}
    onClick={() => setClicked(!clicked)}
/>

使用

classes

道具：

[...]
overrideColorPrimary: {
    backgroundColor: '#ffb34b',
},
overrideColorSecondary: {
    backgroundColor: '#00d799',
},
[...]

但是当芯片聚焦或悬停时我仍然遇到问题，它默认为

theme.js

颜色。 单击芯片后，会显示此属性：

.MuiChip-clickableColorPrimary:hover, .MuiChip-clickableColorPrimary:focus {
    background-color: rgb(137, 137, 138);
}

检查元件时。

Answer 1

classes

属性用于覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的CSS API。

或

您可以通过添加新类来覆盖 CSS 属性，也可以将 CSS 属性传递给

style

属性。

请查看我的代码沙箱示例。

Answer 2

您可以通过这种方式更改所选芯片的颜色

首先你可以制作一个res/color文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#9C27B0" android:state_selected="true" /> <!-- when selected -->
    <item android:color="#C54545" /> <!-- Default color -->
</selector>

然后在你的xml文件中

<com.google.android.material.chip.Chip
        android:id="@+id/chip1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:checkable="true"
        android:backgroundTint="@color/chip_background"<!-- Add backgroundcolor here -->
        android:text="@string/chipfilter1"/>

Answer 3

你不能像这样使用类属性。 ColorSecondary和ColorPrimary是位于Chip组件中的类，您可以使用classes属性访问它们，因此要覆盖它，您需要将您自己定义的类传递给它。

/* Define the styling to pass into the classes */
const styles = theme => ({
    overrideColorPrimary: { /* styling in here */ },
    overrideColorSecondary: { /* styling in here */ }
});

/* Inside the component function */
const { classes } = props

/* Pass it to the classes like that */
<Chip
    classes={{
            ColorPrimary: classes.overrideColorPrimary
            ColorSecondary: classes.overrideColorSecondary
        }}
    color={!clicked ? 'primary' : 'secondary'}
    size="small"
    label={`${clicked ? 'Copied!' : 'Copy'}`}
    onClick={() => setClicked(!clicked)}
/>

这样，MUI 就会将您定义的样式用于 MUI 定义的类。