• 스타일링이 포함된 컴포넌트
• 자바스크립트가 동작하는 css여서 성능에 좋지않음. 특히 client side rendering일때.
• react, react-native에서 사용

라이브러리 : styled-componets

https://styled-components.com/

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

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;

const Container = styled.div`
  text-align: center;
`

render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);