Day 141 - Styled Components Basics

Ever since I started using React I have been using SASS (SCSS) for styling my applications. The reason why I started using SASS in the first place is because of Nesting and Module Importing in SASS. It really helps when your project grows bigger and bigger and your CSS becomes this mess and difficult to maintain.

Another solution to this problem that SASS tries to solve is CSS Modules where you divide CSS into smaller files one for each compoenet and so and then CSS Modules will use those to style your components and will assign classes with random suffixes so that they won't cause any bugs. I tried is once but didn't liked it because of the classNames.

And then there is Tailwind CSS but the problem was still the same that there were now class names that you have to maintain and with complex styling and hover and other state effects it becomes this 3 to 4 lines of just class names. There is a solution to this too but overall I didn't liked it. I have used tailwind CSS in one of my projects which is a Gmail clone with Reddit API.

Styled Components

Another solution to this CSS problem is CSS in JS. CSS in JS means that we can write CSS directly with JavaScript as we do with HTML in react. Styled Components is one example of CSS in JS. It uses template literals for writing CSS and then parses and injects the CSS into react components. But why use Styled Components?

Why Styled Components?

Styled Components:

  • Loads only CSS that the components rendered on the page require.
  • This means no extra CSS.
  • Unique class names so no class name bugs.
  • Deletes all unused CSS once the component is unmounted.
  • Easy to maintain.
  • Automatic Vendor Prefixing which means that your app will look the same on all browsers.

Now we know why Styled Components and now it is how Styled Components?

Installation

It takes just a single command to install Styled Components and get started with it.

$ npm install --save styled-components
# or using yarn
$ yarn add styled-components

Basics

Styled Components uses template literals to style react components. With SC you dont have to first write the styles and then assign them to their respective tag but you define a Component that will render the tag with the styling of your choice.

const Title = styled.h1`
  font-size: 2rem;
  font-family: Righteous;
  color: var(--h-text);
`;

return <Title>zainsci-blog</Title>;

The above written code is same as this below one.

return (
  <h1
    style={{
      fontSize: "2rem",
      fontFamily: "Righteous",
      color: "var(--h-text)",
    }}
  >
    zainsci-blog
  </h1>
);

Conditional CSS Styling

Styling of a tag can be rendered based on the props provided to the component. Like how bootstrap have a primary and secondary color buttons but with same underlying styling. With Styled Components we do it like this.

const Button = styled.button`
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  outline: none;
  border: 2px solid var(--blue);
  background-color: ${props =>
    props.primary ? "var(--blue)" : "var(--white)"};
  color: ${props => (props.primary ? "var(--white)" : "var(--blue)")};
`;

return (
  <>
    <Button>White Button</Button>
    <Button primary>Blue Button</Button>
  </>
);

Extending Styles

Components can inherit styles from other components. Making some changes on the above code wand still do render the same thing.

const Button = styled.button`
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  outline: none;
  border: 2px solid var(--blue);
  background-color: var(--white);
  color: var(--blue);
`;

const PrimaryButton = styled(Button)`
  background-color: var(--blue);
  color: var(--white);
`;

return (
  <>
    <Button>White Button</Button>
    <PrimaryButton>Blue Button</PrimaryButton>
  </>
);

Inherited components can change tags after they are placed in the JSX. Like we can use styled Button tag as an anchor tag by providing as prop with the tag name.

return (
  <Button as="a" href="/contact">
    Contact Us.
  </Button>
);

Using Prop Values

We can pass custom values props and use these props in styling to do custom styling as we write the components.

const Button = styled.button`
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  outline: none;
  border: 2px solid var(--blue);
  background-color: ${props => props.bgColor || "var(--white)"};
  color: var(--text);
`;

return (
  <>
    <Button>White Button</Button>
    <Button bgColor="var(--blue)">Blue Button</Button>
  </>
);

Next we will look at the Advanced features of Styled Components.

zainscizainsci