当变量为负数时如何更改背景颜色？答案

【问题标题】：How to change background color when a variable is negative?当变量为负数时如何更改背景颜色？
【发布时间】：2019-11-03 14:32:48
【问题描述】：

当变量 totalNetworkScore 为负数时，我需要将样式化 div 的背景颜色更改为红色。

【问题讨论】：

目前我有“背景：绿色；”。我只是不知道当变量的值小于 0 时我会使用什么语句将背景变为红色。
你是如何设置背景颜色的？你是用纯 CSS 做的吗？你是在组件模板中做的吗？变量在哪里？
我正在使用反应。该变量位于文件的前面。我正在通过样式化的 div 设置背景颜色。 (const NetworkScore = styled.div`)
我建议你使用 styled-components。使用它，您可以将道具传递给您的样式，并且非常容易进行类似于您打算做的更改。

标签： html css reactjs if-statement conditional-statements

【解决方案1】：

您可以尝试使用ternary operator 来设置条件类。

:class="{{totalNetworkScore ? 'green' : 'red'}}"

在css中：

.green {
    background: green;
}

.red {
    background: red;
}

【讨论】：

不，您最初的回答很好。我最终通过声明另一个具有真或假值的变量将其直接实现到“背景：”中。只要 totalNetworkScore 低于 0，该值就会发生变化。

【解决方案2】：

您可以使用@emotion/core 库并执行以下操作：

import { css } from "@emotion/core";
import React from "react";

checkNegative = counter => {
  if (counter) {
    return css`
      background: green;
    `;
  }
};

class Component extends React.Component {
  state = { counter: -1 };
  render() {
    return <div css={checkNegative(this.state.counter)}>some text</div>;
  }
}

export default Component;

【讨论】：