Styling component in react

hi everyone, I’m pretty new to react. and i’m doing a small project using vite.

so I used an array of all the components info in one file but i’m struggling to put different border-top color for each component. as there’s only one component rendered… can you please help me with that?

You will need to share your code so people can help you.

I would suggest posting a github repo link

1 Like

i deployed the project on github pages and this is the link
GitHub - onna4/react-four-card-feature-section (repo link)
Frontend Mentor | Four card feature section (live site link)

I really don’t know why grid isn’t working and things are on top of each other like this…
and the pics were showing on my device … don’t know what happened
really sorry i’m a beginner.

It looks like in your App.css you were targeting main here

main {
  display: grid;
  place-items: center;
  gap: 1rem;
}

but if you target the App class, then the cards will no longer be stacked on top of eachother.

.App {
  display: grid;
  place-items: center;
  gap: 1rem;
}

You will still need to work on getting those cards into the final design as shown in the challenge. But at least this gets you in the right direction.

You could add another prop for the borderTop to your card component here

   <main className='wrapper'>
        <article className={`card ${props.techCardName}`}>
          <h1 className='cardHead'>{props.heading}</h1>
          <p className='paragraph'>{props.paragraph}</p>
          <img src={props.image} alt={props.alt} />
        </article>
    </main>

Then in your card data file, you can add a new property for techCardName

 {
    techCardName: "calculator-card",
    heading: "Calculator",
    paragraph:
      "Uses data from past projects to provide better delivery estimates",
    image: "images/icon-calculator.svg",
    alt: "calculator icon",
  },

Then you can apply the border tops in your css

.supervisor-card {
  border-top: 4px solid black;
}

.team-card {
  border-top: 4px solid red;
}

Hope that helps!

1 Like

As a side note, I would not suggest using multiple main elements

Screen Shot 2023-03-12 at 8.08.03 PM

You should just have one main element.

Same goes for your h1.

I would change those elements in your Card component.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.