Styled Components

Styled Components is a CSS Library for React. You start by including it at the top of your file.

import styled, { keyframes } from 'styled-components'

You then defined a React Component by defining the styles in a template string. In the example below, the styled.div will create a react component wrapper in those styles. Then we just use the Component in our jsx like a normal component without needing to define css classes or cssJsObjects. Very clean!

const Box = styled.div`
    height: 300px;
    width: 220px;
    background: red;
    &:hover {
        cursor: pointer;
    }
`

export default () => <Box />

Animations

If you want to do animations, you can do that with keyframes. You have to make sure you define your keyframe animation first before using it.

const placeHolderShimmer = keyframes`
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
`

const AnimatedBackground = styled.div`
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: ${placeHolderShimmer};
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 480px;
    position: relative;
`