Emotion Styled Components [Tutorial]

Styled Components are becoming the standard

Styled Components are a perfect pairing when working within a component-based framework (i.e., React, Angular, Vue) so it isn’t surprising to see the growing popularity for this type of styling within the industry. While Styled Components closely resemble that of strict CSS, there are a few syntactic differences that may make it difficult for newly introduced developers to begin working with this library. In this tutorial I will go through some of the most common use-cases when working with Styled Components as well as how to implement them into your own projects.

Styling an HTML tag

First you will need to initialize the Styled Component. Then you can use the Styled Component just like any other Functional Component, although it will now include the styling you’ve added.

const Styledbutton = styled.button`
  background-color: red;
`;

<Styledbutton>Styled button</Styledbutton>

Styling a prebuilt component

When using a prebuilt component, the initialization process is exactly the same, although rather than using the dot operator you’ll need to wrap the component in parentheses.

import { Button } from "react-bootstrap";

const StyledButton = styled(Button)`
  background-color: red;
`;

<StyledButton>Styled button</StyledButton>

Styling nested selectors

Oftentimes when working with prebuilt components you may run into situations where nested attributes need to be altered to accommodate your stylistic needs. This can be done by prepending an ‘&’ to the item you are attempting to select.

import { Button } from "react-bootstrap";.

const StyledSuccessButton = styled(Button)`
  &.btn-success {
    background-color: red;
  }
`;

<StyledSuccessButton>Styled button</StyledSuccessButton>

Styling media queries

Responsive web design is one of the most important features implemented by web developers in the modern era of technology. Adjusting Styled Components by a media query is very simple, just include the CSS at-rule prior to the media keyword.

import { Button } from "react-bootstrap";

const StyledMediaQueryButton = styled(Button)`
  @media (max-width: 650px) {
    background-color: red;
  }
`;

<StyledMediaQueryButton>Styled button</StyledMediaQueryButton>

Styling with props

One of the major improvements Styled Components has over vanilla CSS is the ability to pass props into components that can then be used to dynamically alter styling based on external factors. Every Styled Component has the ‘props’ attribute which can be accessed to pull out extra data that can be used to change how that component is rendered.

import { Button } from "react-bootstrap";

const StyledPropsButton = styled(Button)`
  background-color: ${(props) => props.bgcolor};
`;

<StyledPropsButton>Styled button</StyledPropsButton>

Styling with conditional props

Since Styled Components allow for functional rendering, it can be very easy to implement conditional statements that alter how the component is rendered based on the props passed into it.

import { Button } from "react-bootstrap";

const StyledConditionalPropsButton = styled(Button)`
  background-color: ${(props) => (props.isRed ? 'red' : 'green')};
`;

<StyledConditionalPropsButton>Styled button</StyledConditionalPropsButton>

Demo code