React Native开发：Frontend Mentor时间追踪仪表板项目中组件内div无法设置差异化颜色的问题求助

Got it, let's fix this issue where all your .activityImage divs are getting the same color. The core problem is that every ActivityCard uses the identical CSS class, so style changes apply universally. Here are two simple, scalable solutions:

1. Dynamic Inline Styles (Quick & Flexible) #

This approach lets you pass a color directly as a prop to each ActivityCard, which we'll use to set the background color inline.

First, update your ActivityCard component to accept and use a cardColor prop:

function ActivityCard(props) {
  return (
    <div className="cards">
      {/* Add inline style using the passed color prop */}
      <div 
        className="activityImage" 
        style={{ backgroundColor: props.cardColor }}
      >
        <img src={props.image} alt="Activity Glimpse" />
      </div>
      <div className="activityDetail">
        <p className="activityText">{props.activity}</p>
        <img className="morebtn" src={props.more} alt="More" />
        <div className="clear"></div>
        <h1>{props.duration}</h1>
        <p>{props.pastDuration}</p>
      </div>
    </div>
  );
}

Next, make sure your Schedule array includes a color value for each activity (e.g., { image: "...", activity: "...", cardColor: "hsl(15, 100%, 70%)", ... }). Then update your createActivity function to pass this color:

function createActivity(item) {
  return (
    <ActivityCard
      image={item.image}
      activity={item.activity}
      more={item.more}
      duration={item.duration}
      pastDuration={item.pastDuration}
      cardColor={item.cardColor}
    />
  );
}

2. Dynamic CSS Classes (Cleaner for Theming) #

If you prefer keeping styles in CSS instead of inline, define unique classes for each activity type and pass the class name as a prop.

First, add these classes to your CSS file:

.activityImage--work {
  background-color: hsl(15, 100%, 70%);
}
.activityImage--play {
  background-color: hsl(195, 74%, 62%);
}
.activityImage--study {
  background-color: hsl(348, 100%, 68%);
}
/* Add more classes for other activity types */

Update the ActivityCard to accept an imageClass prop and combine it with the base class:

function ActivityCard(props) {
  return (
    <div className="cards">
      {/* Combine base class with dynamic class */}
      <div 
        className={`activityImage ${props.imageClass}`}
      >
        <img src={props.image} alt="Activity Glimpse" />
      </div>
      <div className="activityDetail">
        <p className="activityText">{props.activity}</p>
        <img className="morebtn" src={props.more} alt="More" />
        <div className="clear"></div>
        <h1>{props.duration}</h1>
        <p>{props.pastDuration}</p>
      </div>
    </div>
  );
}

Then update your Schedule items to include the class name (e.g., { image: "...", activity: "...", imageClass: "activityImage--work", ... }) and pass it in createActivity:

function createActivity(item) {
  return (
    <ActivityCard
      image={item.image}
      activity={item.activity}
      more={item.more}
      duration={item.duration}
      pastDuration={item.pastDuration}
      imageClass={item.imageClass}
    />
  );
}

Quick Note #

I noticed you're mixing class and className in your JSX—React uses className instead of class to avoid conflicts with JavaScript's class keyword. I updated the examples to use className consistently, which will prevent any unexpected behavior.

内容的提问来源于stack exchange，提问作者Abbas Manning