Как изменить цвет фона, когда переменная отрицательна?

Question

Мне нужно изменить цвет фона стилизованного div на красный, когда переменная totalNetworkScore отрицательна.

Answer 1

вы можете использовать библиотеку @ 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;

Answer 2

Вы можете попробовать троичный оператор для установки условных классов.

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

в css:

.green {
    background: green;
}

.red {
    background: red;
}