React 리액트 - 리액트 style 활용 방법 theme.js

 

 

theme.js

 

 

 

 

- 테마 관련 정의 파일
- UI/UX 가이드에 정의된 값을 정의하는 파일

 

theme.js에서 전체 테마를 정의한 후

common.js에서 프로젝트에서 자주 쓰이는 공통 속성을 정의

style.js에서 해당 폴더에 적용하는 스타일을 변경 가능하도록 정의해 사용

 

 

<styles > theme.js>

const theme = {};
  theme.PALETTE = {
    primary: {
      main: "#ffd159",
      sub: "#fff4d8"
    },
    secondary: "#f1ebf5",
    white: "#fff",
    gray: {
      100: "#f1ebf5",
      200: "#aea8be",
      300: "#605866"
    },
    error: "#eb6144",
    background: {
      white: "#eee",
      gray: "#f1ebf5",
      black: "#333"
    }
  }

  theme.FONT_SIZE = {
    h1: "55px",
    h2: "40px",
    h3: "30px",
    h4: "21px",
    h5: "18px",
    h6: "16px",
    h7: "13px",
    h8: "11px",
    h9: "8px"
  }

  theme.FONT_WEIGHT = {
    thin: "100",
    regular: "400",
    bold: "800",
  }

  theme.FONT_LINE = {
    h1: "75px",
    h2: "55px",
    h3: "41px",
    h4: "29px",
    h5: "25px",
    h6: "22px",
    h7: "17px",
  }

export default theme;

 

 

- 가장 기본적으로 많이 쓰이는 스타일 템플릿

- 사용하고자 하는 전체 템플릿을 미리 정의해두고 사용

 

 

<App.js>

import React from 'react';
import './App.css';
import GlobalStyle from './styles/global';
import { ThemeProvider } from 'styled-components';
import theme from './styles/theme';
import Styled04 from './pages/styled/Styled04';

function App() {
  return (
    <>
      <ThemeProvider theme={theme}> 삭제금지: 프로젝트 전체 테마 적용
        <GlobalStyle /> 삭제금지: 프로젝트 전체 스타일 적용
        <Styled04 />
      </ThemeProvider>
    </>
  );
}

export default App;

 

 

- 메인 파일의 컴포넌트 위에 테마 적용

 

 

테마 활용

 

 

<styles > common.js>

import { css } from "styled-components"

export const h1Bold = css`
  font-size: ${({theme}) => theme.FONT_SIZE["h1"]};
  line-height: ${({theme}) => theme.FONT_LINE["h1"]};
  font-weight: ${({theme}) => theme.FONT_WEIGHT["bold"]};
`

export const h3Regular = css`
  font-size: ${({theme}) => theme.FONT_SIZE["h3"]};
  line-height: ${({theme}) => theme.FONT_LINE["h3"]};
  font-weight: ${({theme}) => theme.FONT_WEIGHT["regular"]};
`

 

 

적용한 테마 파일의 수정을 용의하게 하기 위해

styles > common.js에 정의해준다

 

-> 필요 시 값을 변경해 특정 프로젝트에서 바로 수정 적용 가능

 

 

연습문제

 

 

<Styled04.jsx>

import React from 'react';
import S from './style';

const Styled04 = () => {
  return (
    <div>
      <S.Title>
        MY H1 FONT! APPLIED MY OWN GUIDE
      </S.Title>
      <S.SubTitle>
        H3 REGULAR - MY FONT STYLE SUBTITLE
      </S.SubTitle>
    </div>
  );
};

export default Styled04;

 

 

<styled > style.js>

import styled from "styled-components";

const S = {}

  // Styled04
  S.Title = styled.p`
    ${h1Bold}
  `

  S.SubTitle = styled.p`
    ${h3Regular}
  `

export default S;

 

 

styles > common.js에 정의한 내용을 활용하기 위해

작업 중인 폴더의 style.js 파일에서 불러와 사용

 

-> 필요 시 값을 변경해 특정 페이지에서 바로 수정 적용 가능

 

 

<결과화면>

 

 

 

https://developernew.tistory.com/446

React 리액트 - 리액트 style 활용 방법 global.js

https://developernew.tistory.com/444

React 리액트 - 리액트 style 활용 방법 common.js

https://developernew.tistory.com/443

React 리액트 - 폴더 구조, 리액트의 스타일

https://developernew.tistory.com/445

React 리액트 - 폰트 스타일 적용 방법