Styled Components

Basics and gist to styled-components.

Styled components is a react library that allows you to write your styling within javascript files. This means no more going out of the way to import CSS files globally or through modules. It supports CSS, and Sass syntax and makes it easier to conditionally render CSS onto your components.

Import into the file as styled.

Start by installing styled-components, and importing them into your react file.

An example from a little project I'm working on.

Here is an example of a styled component within a js file, here we set how the DaysWrapper will display its children components. note that this only Gives us the styling of what will wrap our list.

Continuation of the above js file

This means that the parent div <DaysWrapper> will contain the code for the container for each day object. Each day component that will be outputted contains its own styling given to it by a
- styled.<Tag>
variable.

You write these components by setting the name of the component/tag to a variable and then calling styled.tag`` at the end, javascript reads the backticks and understands that it's a function decleration. behind the scenes, it works to convert the above-styled component into valid inline CSS.

A huge bonus to writing styled-components is that you can seek all the logic needed for a component inside of a js file and use props and state to declare styles more easily. You can also set base classes that you can extend to give different styles under certain conditions. as well as make global styles and themes!