CODEWITHSUNDEEP
cssreactjs
Shahar
Shahar

Reputation: 488

React - layouting components

What would be the best way to set a margin between reusable components in the React way?

Considering I have this layout

<div className="firstLayout">
    <Timestamp />
    <Title />
<div>

<div className="secondLayout">
    <Timestamp />
    <Title />
<div>

In the first layout I want no margin between the components. In the second layout, I want 5px margin between them.

As I see it, I have two options -

  1. Include a <Spacer/> component which inserts an empty div (extra markup) with the desired space

  2. Pass a prop to the component and style it using inline styles, which is inferior in terms of performance, ability to debug conveniently etc.

What would be the best way to tackle this?

Thanks.

Upvotes: 1

Views: 163

Answers (1)

wintvelt
wintvelt

Reputation: 14101

Best way to style this is probably css:
In react, give the highest real tags (divs?) in your timestamp and title components a className.

In your css: 

.firstLayout > .myClass {
  margin: 0;
}

.secondLayout > .myClass {
  margin: 5px;
}

Upvotes: 1

Related Questions