styled components css예제

css를 이용한 가변 스타일링

import styled, { css } from 'styled-components;

const StyledButton = styled.button`
  font-size: 20px;
  padding: 0.25em 6em;
  border: solid 2px pink;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
  ${(props) =>
    props.primary && 
    css`
      background-color: white;
      color: black;
    `}
  `;

Mixin css props

const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center
`;

const FlexBox = div`
  ${flexCenter}
`;