Emotion Styled Components [Tutorial]

Jaiden Hodson — Mon, 27 Jun 2022 03:31:13 +0000

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

My First Post [Welcome to my Blog!]

Jaiden Hodson — Tue, 21 Jun 2022 02:00:12 +0000

Hey all, my name is Jaiden and I’d like to welcome you to the beginning of my blog journal! I’m a full stack software developer with most of my web development experience using the MERN stack (MongoDB, Express, React, Node). I love learning new technologies and I’m always on the hunt for new project ideas.

As I continue my journey into the life of a software engineer, I will be updating this blog with things I’ve learned along the way. I’m creating this blog to document my progress while also hopefully providing useful information to my fellow computer geeks.

My initial roadmap for things I’ll be writing about will mostly involve features I’ve implemented within the projects I’ve worked on (as well as projects I’m currently developing). These posts will likely align more closely to frontend development, but I will also include the occasional backend feature as well. As an excuse to freshen up on my data-structures and algorithms, I may include the recurring writeup on Leetcode questions I run through as I prepare myself for coding interviews.

Thanks for reading,

Jaiden (aka PvtGandalf)

DEV Community: Jaiden Hodson