Cheat Sheets

styled components

Created: 2019 December 11th

Updated: 2019 December 11th

Edit this page on GitHub

conditionally use a style

1<StyledButton
2 active={true}
3 onClick={this.handleButton}
4></StyledButton>

And in your styles something like this:

1const StyledButton = styled.button`
2 align-items: center;
3 line-height: 0.2;
4
5 ${({ active }) =>
6 active &&
7 `
8 background: blue;
9 `}
10`;