Question

我正在创建卡片，并且希望它们根据其类型（天使，恶魔等）具有不同的颜色。根据我的数据库，该类型是JS文件中的条件。我正在使用SASS，却迷路了！我尝试了类似的方法，但完全不起作用，知道吗？

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

我希望所有卡牌不仅更改显示类型，

欢迎任何帮助，谢谢！

Answer 1

欢迎Nao，

假设我们有一个来自API的标志cssClass: string字符串是来自API的angel或demon值。

然后，在我们的类中，通过render方法，将cssClass值存储在类的state中，如下所示：

const { cssClass } = this.state

假设我们有一个Card组件，该组件将在该值更改时呈现，我们可以这样做来侦听cssClass值更改，并根据它给出适当的className。在render方法中，我们这样：

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

在此处：className={卡$ {cssClass.length？ cssClass：''}}`

我们要询问cssClass属性是否包含大于0的字符串的任何长度作为值，如果true返回该值，该值可以是{{ 1}}或demon，否则它将返回一个空字符串。

在您的CSS文件中，您不需要任何angel标志，只需定期执行CSS。

Answer 2

您可以使用父选择器：

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

根据SASS条件根据类别更改颜色

2 个答案: