Using styled-components with React

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 😁

Blog