Styled Components

Intro to React > Styled Components

Styled-components Examples

Using styled-components with react

First you need to install styled-components. In your terminal, type yarn add styled-components. If you are using CodeSandbox, go to "Add Dependency", find styled-components and it will be installed.

As you can see in the above examples, we're using styled-components by first importing it. Then, we can use the styled method, followed by the element we want to style, styled.div, and then add backticks to denote our template which we can add regular CSS syntax into. As you can see below, there's a lot going on in here.

import styled from 'styled-components';

const Block = styled.div`
  background-color: white;
  color: ${({ color }) => color || "blue"};
  padding: 10px;
  border: 1px solid ${({ color }) => color || "blue"};
  display: inline-block;
  margin: 5px;
  cursor: pointer;
  &:hover {
    background-color: lightblue;
  }
`;

Access React props from Styled-components

As you can see in the above example, we created this component called Block which is just a rectangle. In there, we add this line: color: ${({ color }) => color || "blue"};. This can be quite confusing even to those experienced with React. What's going on here is we're actually destructuring off of the React props. This is the same as saying: color: ${props => props.color || "blue"}; Still confused? This still might look weird as we didn't explain what the arrow function actually does. Well, this is just a callback function provided by styled-components. It's actually the same as defining a regular JavaScript function:

color: ${function(props){
  if(props.color){
    return props.color;
  }
  return "blue";
}}

The one lined statement we defined originally is just the above JavaScript simplified with ES6 shorthand: arrow functions & object destructuring. So anyway, this allows you to dynamically set style attributes of this component: <Block color="green">Ex B</Block>. This creates a Block with green text.

Styled-components hover selector

You can utilize the CSS hover selector easily within a styled-component.

  const Block = styled.div`
    background-color: white;
    &:hover {
      background-color: lightblue;
    }
  `;

When hovering on this element, see the background-color change.

Lesson 21/22

import React from "react";
import ReactDOM from "react-dom";
import styled, { createGlobalStyle, keyframes, css } from "styled-components";

const GlobalStyle = createGlobalStyle`
   body {
    background-color: #eee; 
   }
`;

const pulse = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;

const Container = styled.div`
  max-width: 300px;
  margin: auto;
  font-family: "Josefin Sans", sans-serif;
`;

const Block = styled.div`
  background-color: white;
  color: ${({ color }) => color || "blue"};
  padding: 10px;
  border: 1px solid ${({ color }) => color || "blue"};
  display: inline-block;
  margin: 5px;
  cursor: pointer;
  &:hover {
    background-color: lightblue;
  }
`;

const BoldBlock = styled(Block)`
  font-weight: bold;
  border: 3px solid ${({ color }) => color || "blue"};
  padding: 10px;
`;

const PulseBlock = styled(Block)`
  animation: ${pulse} 750ms infinite alternate;
`;

const ArrowBlock = styled(Block)`
  &::before {
    content: "◀";
    margin: 0 10px;
  }
`;

const HoverMessage = styled.div`
  display: none;
  ${Container}:hover & {
    display: block;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <Container>
        <h2> Styled Components </h2>
        <HoverMessage> Inside Container </HoverMessage>
        <Block>Ex A</Block>
        <Block color="green">Ex B</Block>
        <BoldBlock color="black">Ex C</BoldBlock>
        <PulseBlock color="purple">Ex C</PulseBlock>
        <ArrowBlock> Ex D </ArrowBlock>
      </Container>
    </>
  );
}

export default App;

Open Sandbox