Изменение цвета чипа Material-ui через colorPrimary или colorSecondary - PullRequest
Новая
       15

Изменение цвета чипа Material-ui через colorPrimary или colorSecondary

0 голосов
/ 25 апреля 2019

Я пытаюсь программно изменить цвет чипа Material-ui без особой удачи. В соответствии с Chip Api вы должны установить цвет через цветовую опору с одним из трех значений из перечисления; по умолчанию, основной и дополнительный. После этого вы сможете переопределить классы colorPrimary или colorSecondary css, и цвет фона должен измениться.

Вот пример моего кода: 

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

И изображение элемента в браузере: https://i.imgur.com/bWYGzzz.png пока не могу вставить: (

Если вы посмотрите на выбранный элемент, вы увидите правильный цвет, который я пытаюсь применить, # ff0000, поэтому он получает цвет и помещает его куда-то.

Я попробовал этот вариант, добавив свойство colorBackground, но я получаю сообщение об ошибке, утверждая, что класс colorPrimary ожидает строку вместо объекта 

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

Еще раз, чтобы подтвердить мою цель: я хочу применить шестнадцатеричный цвет кода к чипу, чтобы изменить цвет фона.

Любая информация полезна, спасибо!

1 Ответ

1 голос
/ 25 апреля 2019

Вы можете сделать это разными способами.

Вы можете добавлять стили напрямую 

<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_}}

...