React styling made easy with Styled Components
Calling all CSS non-fans! I find styling to be the most challenging part of web development. I love building features and appreciate the logic of wiring front & back ends. But regardless of functionality, no one is impressed by a website that looks like:
I understand the notion of “cascading” style sheets and how they ought to work. But as my projects get bigger, I find it difficult to cleanly organize my style files. Most of the time I find myself tangled in a CSS web, hesitant to change things and inadvertently break throw off styles elsewhere in my project.
Cue: React Styled Components. This library allows you compartmentalize your CSS by creating modular style components. The CSS for one component is completely isolated from that of another, in its own styling sandbox. This makes it really easy to play with different components or sections of your page without worrying about unintended side effects. Getting started is a breeze:
npm install --save styled-components
I like to organize my components/containers in folders along with a style file for each. The style file will (obviously) hold the styled components.
You can certainly add your styles in the same file as the component’ JSX, but I find it helpful to separate concerns.
I’ll start with some extraordinarily simple JSX to show you how it’s done. Instead of using traditional JSX to wrap your text/image/input, you will replace the JSX with pre-styled components that are wrapped in a variable name.
Say I wanted to create a component that simply returned an h1 with blue text. Instead of wrapping my text in an <h1>, I define a variable called “Header” which I will assign to be an <h1>. I declare CSS properties like normal within that Header component variable, then I wrap my text in that component like so:
Take care to import and export your files appropriately, the same way you would do with any the react component. The output from the above code is a a blue <h1> tag, just as expected. The beauty is that we’ve now compartmentalized the styling for that particular tag.
Here I’ve added a bit more code. You can see that I had two sentences wrapped in <p> tags that I wanted to have different styles. I created two different components and styled them entirely differently.
One important rule (that cost me a lot of time) — as with regular React components, variable names for styled components must be capitalized.
You can nest additional styles inside of your styled component, just as you would with vanilla CSS.
Note how I was able to target different elements within the <Coding> component. The styles listed at the bottom (color and font-size) will be applied throughout the entire component, unless an element has been more specifically styled. I fully recognize that the code and styles here is silly, but I’m sure you can imagine the utility of being able to isolate styles this way.
These are the basics — it’s really that easy! Styled components won’t make you a CSS wizard (unfortunately), however the modularity of them should make your next project a little bit more manageable.
Check out https://styled-components.com/docs for more info! (But tbh it couldn’t be simpler — just do what I told you 🤪).