Styled Components

Joe Buza

What is SC?

A library that allows you to write actual css code to style your components

Why SC?

  • Simple

  • Utilizes the power of CSS

  • Supports React & React Native

  • Separate UI from Functional components

Basics

Passing props

Adapt using props

Overriding Styles

Overriding Third-party Comps

Animation

Theming

Tips & Tricks

function truncate(width) {
  return `
    width: ${width};
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  `;
}

const Box = styled.div`
  ${ truncate('250px') }
  background: papayawhip;
`;

Tips & Tricks

@mixin handheld {
  @media (max-width: 420px) {
    @content;
  }
}

.box {
  font-size: 16px;
  @include handheld {
    font-size: 14px;
  }
}

SASS

const media = {
  handheld: (...args) => css`
    @media (max-width: 420px) {
      ${ css(...args) }
    }
  `
}

// Make the text smaller on handheld devices
const Box = styled.div`
  font-size: 16px;
  ${ media.handheld`
    font-size: 14px;
  ` }
`;

SC

Battle Tested

Resources

Questions?

Styled Components

By Joe Buza

Styled Components

The best way to style React components!

  • 455
Loading comments...

More from Joe Buza