Member-only story
Are You Drowning In A Pile Of Styled React Components?
But beware! You may step into the too-many-imports-trap or fall into the maelstrom of abstraction, too.
With React, you can write your web-app in a functional way. Rather than changing a global state until you reached the desired outcome, with React, your app consists of a hierarchy of stateless components.
A component is nothing but a function. A function whose returned result only depends on its internal logic and the properties you pass into it. It has no side-effects. You don’t have to care about some outside state that is cumbersome to keep track of.
This applies to the style of a component, too. I am sure, you’ve heard of styled-components. Most probably, you use this library to style your components. And you should. Because it lets you style your component the React way. The functional way. Rather than putting all styles in global, hard-to-manage CSS, you can style your components locally.
But if you’re not careful, you easily drown in a pile of styled React components. Let’s have a look!
You attach a CSS literal to a basic HTML-element with the default helper function styled. This is a low-level factory that provides helper methods in the form of styled.tagname. The tagname is any valid HTML-tag.
In this example, we add a horizontal margin to a div which equally distributes to the left and the right.
A single one component for styling ain’t too bad…
“What if you want to share the same style across two components?” you ask? … Not much of a problem.
If one component extends the other, you can inherit the style. If you like, you can override it (the width for instance).
