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
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;
`