[ styled-components ] 태그는 다르지만 css는 동일 할 때 css를 변수로 관리하기

📍 styled-component에서 태그가 다르지만 css는 동일할 때 css를 변수로 관리하기

styled-component로 태그를 꾸미던 중 태그는 다르지만 나머지 스타일은 동일하게 설정하는 경우가 있었다. 그냥 스타일을 중복해서 사용해도 되지만 그것보다 동일한 css를 변수로 관리하여 각각 적용하면 코드를 중복해서 사용하지 않는다.

import styled from 'styled-components'

// before
const divWrapper = styled.div`
  font-size: 14px;
  background-color: red;
`

const SectionWrapper = styled.section`
  font-size: 14px;
  background-color: red;
`

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

const cssVariable = css`
  font-size: 14px;
  background-color: red;
`

const divWrapper = styled.div`
  ${cssVariable}
`

const SectionWrapper = styled.section`
  ${cssVariable}
`