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 😁
Top comments (0)