styles/theme 사용법

종류

common

코드

작성자

color provider 사용법 styled컴포넌트 내부에서 theme.color.색깔 이런식으로 활용하시면 됩니다.


text-decoration-color: ${({ theme }) => theme.color.purpleDark};

style provider 사용법 style은 공통으로 자주 사용되는 스타일을 묶어놓은 것입니다(@mixin같은)


./src/styles/style.ts
export const style = {
  flexCenter: `
  display: flex;
  justify-content: center;
  align-items: center;
  `,
  flexAlignCenter: `
  display : flex;
  align-items : center;
  `
}

이런식으로 되어 있습니다.


${({ theme }) => theme.style.flexJustifyCenter};

적용할때는 위처럼 적용하면 됩니다. 추가적으로 공통으로 쓸만한 스타일이 생기면 ./src/styles/style.ts에 만든 뒤 사용하시면 됩니다. 앞으로 스타일을 적용할 때 미리 만들어 둔 스타일이 있는지 확인하고 적용해주시면 됩니다.