styled-component ThemeProvider를 사용한 테마

여기 계시다면 아마도 styled-components가 무엇인지 이미 알고 계실 것입니다. 잡담은 건너뛰겠습니다.

이 게시물의 전제 조건은 React 기반 애플리케이션입니다. 가지고 있다면 계속 읽으십시오. 그렇지 않은 경우 계속하기 전에 take a look at this.

스타일 구성 요소 설치

Run the following command to install the npm package (or use yarn , as you wish)

npm install styled-components
or
yarn add styled-components

ThemeProvider로 Theme.js 구성 요소 만들기

Now, create Theme.js file. This file will be your application’s theme entry point.

import { ThemeProvider } from 'styled-components';

const theme = {};

const Theme = ({ children }) => {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default Theme;

The theme object is where you’re going to define your theme variables like colours, font sizes and so on. As far as I know there isn’t a perfect way to define this object so it’s up to you to find your perfect way to do so.

I’ll give you an example below

const theme = {
  colour: {
    primary: '#3D315B',
    secondary: '#444B6E',
    background: '#708B75',
    link: '#9AB87A',
  },
  font: {
    size: {
      extraSmall: '14px',
      small: '16px',
      medium: '18px',
      large: '20px',
      extraLarge: '24px',
    },
    family: 'sans-serif',
  },
  breakpoint: {
    mobile: '375px',
    tablet: '600px',
    laptop: '1200px',
    desktop: '1600px',
  },
};

So now your Theme.js file should be something like this

import { ThemeProvider } from 'styled-components';

const theme = {
  colour: {
    primary: '#3D315B',
    secondary: '#444B6E',
    background: '#708B75',
    link: '#9AB87A',
  },
  font: {
    size: {
      extraSmall: '14px',
      small: '16px',
      medium: '18px',
      large: '20px',
      extraLarge: '24px',
    },
    family: 'sans-serif',
  },
  breakpoint: {
    mobile: '375px',
    tablet: '600px',
    laptop: '1200px',
    desktop: '1600px',
  },
};

const Theme = ({ children }) => {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default Theme;

Theme.js 사용

Now that your Theme.js component is ready, you can wrap your React app with it. Go to your React entry point and wrap everything with <Theme>...</Theme>

import React from 'react';
import ReactDOM from 'react-dom';

import Theme from './Theme';

ReactDOM.render(
  <Theme>
    <header></header>
    <main>
      <p>Hello, there!</p>
    </main>
    <footer></footer>
  </Theme>,
  document.getElementById('root')
);

Great, now you need a styled component to see ThemeProvider in action.

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

// create Text component
const Text = styled.p`
  ${({ theme }) => css`
    color: ${theme.colour.primary};
    font-family: ${theme.font.family};
    font-size: ${theme.font.size.medium};
  `}
`;

// use Text component created above
<main>
  <Text>Hello, there!</Text>
</main>;

As you can see, wrapping the whole application with ThemeProvider , the styled components receive theme in the props .

And this is the result

강력한, 응? 하지만 더 있습니다. 동일한 방식으로 미디어 쿼리를 사용할 수 있습니다.

모바일 장치에 대해서만 Text 구성 요소의 스타일을 변경하려고 한다고 상상해 보십시오.

const Text = styled.p`
  ${({ theme }) => css`
    color: ${theme.colour.primary};
    font-family: ${theme.font.family};
    font-size: ${theme.font.size.medium};

    // media query
    @media (max-width: ${theme.breakpoint.mobile}) {
      font-size: ${theme.font.size.small};
      background-color: ${theme.colour.background};
    }
  `}
`;

그리고 이것이 각각 376px와 375px처럼 보여야 합니다.

네가 해냈어! 이제 React 앱에 대한 기본 테마 설정이 완료되었습니다!

무엇 향후 계획?

From this point it would make sense improving this theming setup to allow multiple themes like, for example, dark and light theme.

Reference

이 문제에 관하여(styled-component ThemeProvider를 사용한 테마), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rossanodan/theming-with-styled-components-themeprovider-37lc

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.