Using Styled-components with React
A magical way or writing styles with JavaScript
Well, we all love CSS, we all love JavaScript and we all love React. What if someone tells you that now you can create full-fledged Components ( e.g., a button, a navbar, a tile, etc ) while writing React code using CSS in a very easy handy way.
How does a styled component looks like ?
Just like this 👇
const Button = styled.a`
/* This renders the buttons above... Edit me! */
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
`
And how do we use it? Is it even simple? Yes, you guessed it right,
// Writing this will give you a separate button component of the CSS properties
//mentioned above
<Button>Big Button</Button>
Ain't it easy? Now you can use this button anywhere without writing any separate class or anything.
Let's dive a little deeper
Why Styled Components?
- Automatic vendor prefixing: You can use standard CSS properties, and styled-components will add vendor prefixes should they be needed.
- Unique class names: Styled components are independent of each other, and you do not have to worry about their names because the library handles that for you.
- Elimination of dead styles: Styled components removes unused styles, even if they’re declared in your code.
Installation
It is super easy. You can do it through a CDN or with a package manager like yarn or npm…
for npm
// npm
npm i styled-components
with yarn
yarn add styled-components
Let's learn the syntax now
If I go a little precise, styled-components use Javascript's template literals to bridge the gap between components and the styles. So, technically when we write a styled component, we are actually writing React components with styles.
Let's see an example now.
import styled from "styled-components";
// Styled component named StyledButton
const OrangeButton = styled.button`
background-color: orange;
font-size: 1.5rem;
color: white;
border-radius: 5px;
`;
// nothing special here, works just like a normal react component.
const SomeReactComponents = () => return <OrangeButton> Login </OrangeButton>;
Now we know that whatever we write with styled components, in reality, is a React component. So a React component is definitely incomplete without props.
Yes we can use props with styled components 😍🔥🔥
Let's learn how to do that
For example, we need a button, but the button's color is coming from the database or it is dynamic or dependent on some other component, how will we use that in styled-components? Obviously using props.
import styled from "styled-components";
const DynamicButton = styled.button`
font-size: 1.5rem;
color: white;
border-radius: 5px;
//props
background-color: ${props => props.bg === "red" ? "red" : "green";
`;
function SomeReactComponent() {
return (
<div>
<DynamicButton bg="Red">Red button</DynamicButton>
<DynamicButton bg="Green">Green button</DynamicButton>
</div>
)
}
So we pass a bg in props and if you pay a little attention ${props} is used because styled components use JavaScript's template literals.
Tip
We can keep styles in a separate file with export statements and just simply import them wherever we want to use them.
That's Styled components !!
Pros
- Reusable – just as the normal React components, you can make small reusable pieces of code and avoid code duplication. Typical use cases are buttons, tables, forms, etc.
- Writing pure CSS – оne of the biggest advantages of Styled components in comparison to other styling solutions in React. You don’t use weird syntax and write the CSS as a JavaScript object. Inside the template literals, you write SCSS or plain CSS.
- Dynamic styling – Using props, you can have dynamic values, which gives you a high level of flexibility by avoiding writing duplicated styles.
Cons
- The only con I see is while debugging something in chrome dev tools. We see weird class names and hence it is difficult to find what class is doing what. Other than this I find them super lit.
See you using styled components 😁