Stying React JS Elements за пределами возврата - PullRequest
Новая
       13

Stying React JS Elements за пределами возврата

0 голосов
/ 16 марта 2019

У меня есть следующий компонент React JS. 

export class Sample {
  render() {
    let sampleFruits = ["apple", "mango", "orange"];
    let fruits = [];
    for (let i = 0; i < sampleFruits.length; i++) {
      fruits.push(<div className="fruit">{sampleFruits[i]}</div>);
    }
    return (
      <div>
        <h1 className="hello">Hello</h1>
        <div>{fruits}</div>
        <style jsx>
          {`
            .hello {
              font-size: 18px;
              color: #f00;
            }
            .fruit {
              color: #0f0;
            }
          `}
        </style>
      </div>
    );
  }
}

В приведенном выше коде стиль применяется только к .hello, где .fruit не получает стиль. Любые предложения по стилизации этого, кроме использования jsx global?

1 Ответ

0 голосов
/ 16 марта 2019

Вы можете просто включить стиль, когда объявляете div.

for (let i = 0; i < sampleFruits.length; i++) {
      fruits.push(<div className="fruit" style={{ color: '#0f0' }}>{sampleFruits[i]}</div>);
    }
...