custom Component style

Component 스타일 커스텀 하기

<Table> 의 스타일을 수정해야 한다면 하나의 styled Tag 를 생성하여 감싸서 디자인을 적용 한다

1. styled Tag 생성
2. styled Tag 로 감싸기
3. CSS 우선순위로 적용되지 않을 시 커스텀해야 하는 Component 에 id 를 주어 CSS 우선순위 높이기

styled Tag 생성

import styled, { css } from 'styled-components'
const TableWrap = styled.div`
  td {
    background-color: #333;
  }

styled Tag 로 감싸기

<TableWrap>
  <Table />
</TableWrap>

커스텀 component 에 id 주기

<TableWrap>
  <Table id="table_custom" />
</TableWrap>

const TableWrap = styled.div`
  #table_custom {
    td {
      background-color: #333;
    }
  }
`