88. Styled Components & 미디어 쿼리

style component를 사용할 때 미디어 쿼리를 사용하는 방법은?

간단하다 그저 `` 안에 @media와 같이 작성하고 클래스 명 없이 그냥 필요한 스타일을 적용하면 된다

 

Button.js

import styled from 'styled-components';

const Button = styled.button`
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;

  @media (min-width: 768px) {
    width: auto;
  }

  &:focus {
    outline: none;
  }

  &:hover,
  .button:active {
    background: #ac0e77;
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
`;

export default Button;