blog202012 styledcomponents

styledComponents.js

// レイアウトのためのstyled component単体でexportできる
import styled from 'styled-components'
import { Heading } from '../Heading'
export const Section = styled.section`
  display: flex;
  flex-direction: column;
  padding: 16px;
`
// 拡張方法
const Base = styled.div`
  background-color: darkgreen;
  color: turquoise;
`
const Danger = styled(Base)`
  color: red;
`
// 同じスタイリングでも違うタグは別のStyled Componentであり使い回せない
const DangerLine = styled.span` 
  color: red;
`
const Extended = styled(Base)`
  text-decoration: underline;
`
return (
  <div>
    <Base>This will be turquoise</Base>
    <Danger>
      some description
    </Danger>
    <DangerLine>other description</DangerLine>
    <Extended>extended</Extended>
  </div>
)
// propsの型定義もOK
const Label = styled.span<{size: number}>`
  color: blue;
  font-size: ${(props) => props.number};
`