Есть ли способ изменить выбранный цвет чипа?

Question

Я пытаюсь изменить выбранный цвет компонента Chip, не меняя мой 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)}
/>

, но это не помогло.

edit:

Я обновил свой код в соответствии с комментарием Фреда A :

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

с использованием classes prop:

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

Но у меня все еще есть проблемы, когда чип находится в фокусе или зависает, где он по умолчанию равен theme.js цвета. после щелчка по микросхеме это свойство отображается:

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

при проверке элемента.

Answer 1

classes props используется для переопределения или расширения стилей, применяемых к компоненту. Подробнее см. CSS API ниже.

ИЛИ

Вы можете переопределить атрибуты CSS, добавив новый класс, или вы можете передать атрибуты CSS на style реквизит.

Пожалуйста, проверьте мой Код Песочница пример.

Answer 2

Вы не можете использовать свойство классов таким образом. 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 классов.