Inline CSS Styling in ReactJs

Question

I am facing a trouble while setting up the inline CSS Style in React App .As I want to change the background-color of my cards according to data in array but failed to do so . I am using a variable having switch statement and passing it in the as Inline style but the background-color is not changing . Anybody can help me to solve this issue or tell me the another way to solve it . Thanks .

Here is my 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>
        )
    }
}

This is my App.css file

.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;
}

And this is my data.js file

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'
     },
]

Quick tip: instead of the switch, just do let myColor = `color--${color}` — Andrew Li
– Andrew Li, Commented Sep 16, 2018 at 19:07
I need to remove the switch statement and call myColor in my style thats what you are telling ? — SyedKhizer
– SyedKhizer, Commented Sep 17, 2018 at 10:34

Michał Perłakowski · Accepted Answer · 2018-09-16 19:02:43Z

2

You should use className instead of style:

return (
  <div className={myColor}>

answered Sep 16, 2018 at 19:02

Michał Perłakowski

93.4k30 gold badges165 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SyedKhizer Over a year ago

Still no change .

Tameem Safi · Accepted Answer · 2018-09-16 19:08:15Z

The best option would be to use classnames npm package.

Just do:

npm install --save classnames

See: https://www.npmjs.com/package/classnames

Then your code would be as below:

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>
        )
    }
}

Collectives™ on Stack Overflow

Inline CSS Styling in ReactJs

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related