기본 문법

const Title = styled.h1`
  ... 
`

const Wrapper = styled.section`
  ...
`

export default function App() {
  return (
    <Wrapper>
      <Title>Hello World!</Title>
    </Wrapper>
  );
}

Props

• 태그 안에 Props를 넣음

const Button = style.button`
  background: ${(props) => (props.primary ? "palevioletred" : "white")};
  color: ${(props) => (props.primary ? "white" : "palevioletred")};
`

export default function App() {
  return (
    <div>
      <Button>Normal</Button>
  	  <Button primary>Primary</Button>
    </div>
  );
}

styled()

- styled(컴포넌트)
const Tomato = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

// App component
<Tomato>Tomato</Tomato>

Passed props

• props 입력시 작동하게 작성

const Input = styled.input`
  color: ${(props) => props.inputColor || "red"};
`;

// App component
<Input defaultValue="김코딩" type="text" />
<Input defaultValue="박해커" type="text" inputColor="blue" />