React router CSS for all routes - css

Question

<BrowserRouter>
<div>
<NavigationBar />
<Switch>
<Route exact path="/" component={Root} />
<Route path="/Path1" component={Path1} />
</Switch>
</div>
</BrowserRouter>
How can I give all the components (Root, Path1) a 15% left and right margin, but not the navigation bar, without applying it individually in each of the routes?
I have tried applying the style to Switch and a div that wraps the Switch but none of these worked (see CodeSandbox).

Answer 1

Wrap the Switch with a div and apply the styles to it. For example:
<div style={styles}><Switch>....</Switch><div>

Answer 2

The routes get built in the following structure:
<div id="root">
<div>
<nav>
<div>Route</div>
</div>
</div>
As such, you can target the routes specifically with:
#root > div > div {
margin: 0 15%;
}
Note the use of >. This is known as the child combinator, and only targets the immediate children. This means that only <div> elements that are a direct child of <div> elements, which in turn are a direct child of #root, will be targetted.
I've created an updated version showcasing this here.
Hope this helps! :)

Answer 3

When facing problem like this, use the point-and-click inspector tool (⌘ + shift + C).
Upon inspecting, you will see your navbar structure to be this:
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li role="presentation" class="">Route1</li>
<li role="presentation" class="">Route2</li>
</ul>
</div>
</nav>
So to target all the <li>, you can simply do
.nav>li {
margin: 0 15%
}
Or .nav>li>a if you intend want to apply directly onto the link.
CSS Specificity Score
Something that you must understand in order to write predictable CSS and avoid scenario like this all together!
For example. let's say if after applying the margin as above, you do this:
li {
margin: 0;
}
You would realize this style wouldn't get applied at all due to lower specificity score.
.nav > li has a class and an element.
li only has an element, hence lower score.
It's something really simple to understand but unfortunately not so many people know about.
5 min read to understand CSS Specificity Score