У меня возникла проблема при настройке встроенного стиля CSS в приложении React. Я хочу изменить цвет фона своих карточек в соответствии с данными в массиве, но не смог этого сделать. Я использую переменную с оператором switch и передаю ее в стиле as Inline, но цвет фона не меняется. Кто-нибудь может помочь мне решить эту проблему или подсказать другой способ ее решения. Спасибо .

Вот мой Card.js

import React , { Component } from 'react'

export default class Card extends Component {
    render(){
        const {title , date , description , color } = this.props.node
        let cardClass = "card-wrapper"
        let myColor = ""
        switch(color) {
             case 'red':
             myColor = 'color--red'
             break;
             case 'blue':
             myColor = 'color--blue'
             break;
             case 'yellow':
             myColor = 'color--yellow'
             break;
             case 'darkBlue':
             myColor = 'color--darkBlue'
             break;
             default:
             break;
            }

        return (
            <div style={{ backgroundColor: myColor }}>
                <div className={cardClass}>
                     <div className="card">
                        <h5 className="card-title">{title}</h5>
                        <p>Created on {date}</p>
                        <p className="card-text">{description}</p>
                  </div> 
              </div>
            </div>
        )
    }
}

Это мой файл App.css

.card-wrapper {
  width: 209px;
  margin: .4%;
  float: left;
  background-color: #5cb85c;
  color: white;
  padding: 16px;
  border-radius: 1px;
}

.color--red {
  background-color: #d9534f;
}
.color--blue{
  background-color: #5bc0de;
}
.color--darkBlue{
 background-color:  #428bca;
}
.color--yellow {
  background-color: #FFD333;
}

А это мой файл data.js

export const data = [
     {
        title : 'title',
        date : '1537032686201',
        description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
        color:'red'
     },
     {
        title : 'title',
        date : '1537032686202',
        description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
        color:'blue'
     },
     {
        title : 'title',
        date : '1537032686203',
        description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
        color:'darkBlue'
     },
     {
        title : 'title',
        date : '1537032686204',
        description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
        color: 'yellow'
     },
]
1
SyedKhizer 16 Сен 2018 в 21:57

2 ответа

Лучший ответ

Лучшим вариантом будет использование пакета classnames npm.

Просто сделать:

npm install --save classnames

См .: https://www.npmjs.com/package/classnames

Тогда ваш код будет таким:

import React , { Component } from 'react';
import classnames from 'classnames';

export default class Card extends Component {
    render(){
        const {
          title,
          date,
          description,
          color
        } = this.props.node;

        return (
          <div
            className={classnames(
              'card-wrapper', {
                'color--red': color === 'red',
                'color--blue': color === 'blue',
                'color--yellow': color === 'yelow',
                'color--darkBlue': color === 'darkBlue',
              }
            )}
           >
             <div className="card">
                <h5 className="card-title">{title}</h5>
                <p>Created on {date}</p>
                <p className="card-text">{description}</p>
            </div> 
          </div>
        )
    }
}
0
Tameem Safi 16 Сен 2018 в 19:08

Вы должны использовать className вместо style:

return (
  <div className={myColor}>
2
Michał Perłakowski 16 Сен 2018 в 19:02