изменить цвет в соответствии с классом с условием SASS - PullRequest
Новая
       95

изменить цвет в соответствии с классом с условием SASS

0 голосов
/ 29 декабря 2018

Я создаю карты и хочу, чтобы они имели разные цвета в зависимости от их типа (ангел, демон и т. Д.). Тип является условием в моем файле JS в соответствии с моей базой данных.Я использую SASS, и я потерян!Я пытался что-то вроде этого, но это не работает вообще, любая идея? 

 .card{
        @if .demon{
            background-color: yellowgreen;
        }
        @if .angel{
            background-color: aqua;
        }
}

Я хочу, чтобы все карты менялись не только там, где появляется тип,

Любая помощь приветствуетсязаранее спасибо!

1 Ответ

0 голосов
/ 29 декабря 2018

Welcome Nao,

Предположим, у нас есть флаг, поступающий из API, который называется cssClass: string. Строка - это значение angel или demon, полученное из API.

тогда,в нашем классе по методу render мы можем получить значение cssClass после того, как сохранили его в state класса следующим образом:

const { cssClass } = this.state

при условии, что мыиметь компонент Card, который будет отображаться при изменении этого значения, мы можем сделать это, чтобы прослушать изменения значения cssClass и дать правильный className в зависимости от него.В методе render мы имеем это: 

render(){
  const { cssClass } = this.state;
  return(
    <Card className={`card ${cssClass.length ? cssClass : ''}} />
  )
}

Здесь: className={ card $ {cssClass.length?cssClass: ''}} `

мы спрашиваем атрибут cssClass, содержит ли он какую-либо длину строки, превышающую 0 в качестве значения, если true, возвращает это значение, котороеможет быть demon или angel, иначе он вернет пустую строку.

в вашем файле css вам не понадобятся флаги @if, просто делайте css регулярно.

...