CODEWITHSUNDEEP
javascriptcssreactjs
Pon
Pon

Reputation: 57

Unable to change BG Color through props

I've googled for endless hours to try and understand why this doesn't work I've heard a state setting system could be a possible solution, but I want to know if this works before proceeding. This should be much simpler to resolve the problem if possible.

In my CSS file I am using the following line of code in order to grab data from the parent.

.cards__item__pic-wrap::after {
   background-color: attr(data-Color);
}

I set this variable like so in the parent JS file

data-Color = {props.color}>

I am able to get the backgroundColor to change when I do something like style = {{backgroundColor: props.color}} which is a common solution for many people. BUT that directly edits the style instead of the pseudo style I need in CSS (the .cards__item__pic-wrap::after)

My current code doesn't even display any background color and I have a feeling attr() is not returning my data properly and causing this.

Full code below:

Cards.css

  .cards__item__pic-wrap::after {
content: attr(data-category);
position: absolute;
bottom: 0;
margin-left: 10px;
padding: 6px 8px;
max-width: calc((100%) - 60px);
font-size: 16px;
font-weight: 700;
color: #fff;
background-color: attr(data-Color);
box-sizing: border-box;

}

Cards.js

import CardItem from './CardItem';
import "./Cards.css"

function Cards() {
  return (
  <div className='cards'>
      <h1> Keep up with the latest information.</h1>
      <div className = "cards__container">
          <div className = "cards_wrapper">
              <ul className= "cards__items" >
                    <CardItem
                    src='/images/test.jpg'
                    text = "Guild's are finally released! Which batch are you?" 
                    label ="Guild News"
                    color = '#1f98f4'
                    alt = "test"
                    path = "/not in use"/>
              </ul>
          </div>
      </div>
  </div>
  );
}

export default Cards;

CardItem.js

import {Link} from 'react-router-dom';


function CardItem(props) {
  return (
  <>
  <li className = "cards__item" >    
      <Link className= "cards__item__link" to = {props.path}>
        <figure className = "cards__item__pic-wrap"  data-category = {props.label} data-Color = {props.color}>
            <img src = {props.src} alt= {props.alt} className = "cards__item__img" />
        </figure>
        <div className = "cards__item__info">
            <h5 className ='cards__item__text'>{props.text}</h5>
        </div>
        {props.color}
      </Link>
  </li>
  </>
  );
}



export default CardItem;

Upvotes: 0

Views: 251

Answers (2)

Mayur Vaghasiya
Mayur Vaghasiya

Reputation: 1472

You can achieve your goal using this code !

//in your css file

.cards__item__pic-wrap {
   background-color: var(--data-color);
}

// in your CardItem.js file

 <figure style={{ '--data-color': props.color, }} className="cards__item__pic-wrap" data-category={props.label}>
      <img src={props.src} alt={props.alt} className="cards__item__img" />
 </figure>

Upvotes: 1

Arno_Geismar
Arno_Geismar

Reputation: 2330

You could do something like this in your css:

.cards__item__pic-wrap[data-Color] {
   background-color: attr(data-Color)
}

you would only be modifying the pic wrappers which have that property defined. In your component check if data-Color has been set otherwise render it without data-Color on

so if prop.color is undefined render like so:

 <figure className = "cards__item__pic-wrap"  data-category = {props.label}>
                <img src = {props.src} alt= {props.alt} className = "cards__item__img" />
    </figure>

otherwise

 <figure className = "cards__item__pic-wrap"  data-category = {props.label} data-Color = {props.color}>
                <img src = {props.src} alt= {props.alt} className = "cards__item__img" />
    </figure>

Upvotes: 1

Related Questions