Styled-components

Scss

sass는 css와 비슷하게 App.scss 파일을 만들어 scss 문법에 맞게 코드 넣는것 이다. Sass는 두가지 확장자(.scss/.sass)를 지원하고,
📍 npm install 작업이 필요함. ( node- sass ) 📍

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

const Box = styled.div`
  background: ${(props) => props.color || 'blue'};
  padding: 1rem;
  display: flex;
`
//Box 컴포넌트에 .color 라는 props가 없으면 blue가 된다-> 지금은 있으니 black

const Button = styled.button`
  background: white;
  color: black;
  border-radius: 4px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 600;

  &:hover {
    background: rgba(255, 255, 255, 0.9);
  }
  
${(props) =>
    props.inverted &&
    /* inverted값이 true면 밑 속성들이 적용된다 */
    css`
      background: none;
      border: 2px solid white;
      color: white;
      &:hover {
        background: white;
        color: black;
      }
    `}
  &+button {
    margin-left: 1rem;
  }
`

const StyledComponent = () => (
  <Box color="black">
    <Button>안녕하세요</Button>
    <Button inverted={true}>테두리만</Button>
  </Box>
)

export default StyledComponent