Question

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

Answer 1

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

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

在CSS中：

.green {
    background: green;
}

.red {
    background: red;
}

Answer 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;

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

2 个答案: