styled-components 라이브러리의 세 가지 개념

소개

최근에 나는 styled-components을 가지고 놀고 있습니다. tagged template literals 을 사용하는 CSS-in-JS 라이브러리입니다. Interpolation , GlobalStyle 및 ThemeProvider 의 세 가지 개념에 대해 이야기하고 싶습니다.

보간이란 무엇입니까?

보간은 전달된 소품을 기반으로 구성 요소를 조정하는 것입니다. 즉, 소품을 통해 값을 주입할 수 있습니다. 예를 들어:

const MockElement = styled.div`
  --size: ${(props) => (props.big ? '100px' : '50px')};
  width: var(--size);
  height: var(--size);
  background-color: yellowgreen;
`;

render(
  <div>
    // This renders a 50x50 square, because there was no "big" prop
    <MockElement />
    // This renders a 100x100 square, because "big" was passed
    <MockElement big />
  <div>
)

따라서 소품을 진실 값으로 사용할 수 있습니다. 맞춤 값은 어떻습니까? 그것도 작동합니다!

const MockElement = styled.div`
  background-color: ${props => props.color ? props.color : 'yellowgreen'};

  --size: ${(props) => (props.big ? '100px' : '50px')};
  width: var(--size);
  height: var(--size);
`;

render(
  <div>
    // This renders a blue square
    <MockElement color='blue'/>
    // This renders... no color??
    <MockElement color />
  <div>
)

Styled props는 기본적으로 truthy이지만 값이 전달되지 않았기 때문에 아무 것도 렌더링되지 않습니다. 이 기술에 기본값을 사용하려면 소품을 완전히 건너뛰거나 null 를 전달합니다.

하지만 조심하세요! 값을 보간할 때 함수를 전달해야 합니다. 그렇지 않으면 코드가 깨집니다. 다음과 같은 것은 작동하지 않습니다.

const MockElement = styled.div`
  background-color: ${props.color}; /* It must be a function */
`;

함수가 인라인이어야 합니까? 아니! 어떤 함수든 콜백으로 간단히 전달할 수 있습니다.

function declaredFunction (props) {
  let scale = `${props.factor * 50}px`
  return scale
}

const MockElement = styled.div`
  --size: ${declaredFunction};
  width: var(--size);
  height: var(--size);
  background-color: ${props => props.color ? props.color : 'yellowgreen'};
`;

render(
  <div>
    // This renders a 150x150, yellowgreen square
    <MockElement big color={null} factor={3}/>
  <div>
)

이것은 탐색의 끝을 표시합니다interpolation. 다음으로!

글로벌스타일이란?

이름에서 알 수 있듯이 GlobalStyle 구성 요소는 응용 프로그램의 일반적인 스타일 지정 규칙을 정의하는 데 사용됩니다. 가까운 비교는 index.css 파일을 사용하여 다른 모든 스타일시트보다 먼저 가져오고 번들링하여 나중에 이 파일을 따르는 css 모듈로 덮어쓰는 것입니다.

전역 스타일을 사용하는 것은 매우 간단합니다! 먼저 다음과 같이 GlobalStyle.js 파일을 생성해야 합니다.

import { createGlobalStyle } from 'style-components';

const GlobalStyle = createGlobalStyle`
  /* Insert global styling here */
`;

export default GlobalStyle;

그런 다음 구성 요소를 아무데나 배치합니다. 적어도 내가 수행한 몇 가지 테스트에서는 구성 요소를 프로젝트 내의 아무 곳에나 배치했고 제대로 작동했습니다. 그러나 구성을 위해 다음과 같이 라우팅 시스템(react-router 포함)을 넣었습니다.

# App.js

import GlobalStyle from './utils/GlobalStyle';

function App() {
  return (
    <BrowserRouter>
      <GlobalStyle />
      <Routes>
        {/*The routes and elements go here*/}
      </Routes>
    </BrowserRouter>
  );
}

시원한! 마지막 주제로 이동: ThemeProvider .

ThemeProvider란 무엇입니까?

ThemeProvider는 모든 자식에 대한 범용 소품의 소스입니다. 모든 구성 요소가 액세스할 수 있도록 하려면 구성 요소를 프로젝트의 루트에 배치해야 합니다.

따라서 App.js를 루트로 사용하면 다음과 같이 할 수 있습니다.

#App.js
import { ThemeProvider } from 'styled-components';

const themeObject = {
  button : {
    primary : {
      background: 'lightblue',
      color: 'white',
    },
    secondary: {
      /* other keywords*/
    }
  }
}

function App() {
  return (
    <ThemeProvider theme={themeObject}>
      <CoolButton />
    </ThemeProvider>
  );
}

그 themeObject 는 ThemeProvider 의 자식인 모든 개체에 액세스할 수 있게 됩니다. 다음과 같이 theme 소품을 interpolation 까지 사용합니다.

#CoolButton.styled.js
import styled from 'styled-components';

const CoolButton = styled.button`
  background-color: ${props => props.theme.button.primary.background};
  /* As seen above and below, you just need to access the string from the theme object */
  color: ${props => props.theme.button.primary.color};
`

GlobalComponent를 ThemeProvider의 자식으로 만들고 필요에 따라 값을 보간하여 세 구성 요소를 모두 결합할 수도 있습니다. 한 가지 유용한 예는 글꼴 모음을 설정하는 것입니다.

# theme.js

const theme = {
  heading: "Cool Heading",
  subHeading: "Cute Heading"
};

export default theme;

# GlobalStyle.js

import { createGlobalStyle } from 'styled-components';
import coolFontPath from './font-file1.woff';
import cuteFontPath from './font-file2.woff';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Cool Heading';
    src: url(${coolFontPath};
  }

  @font-face {
    font-family: 'Cute Heading';
    src: url(${cuteFontPath};
  }

  h1 {
    font-family: ${props => props.theme.heading};
  }

  span.subheading {
    font-family: ${props => props.theme.subHeading}
  }
`
export default GlobalStyle;

# App.js

import GlobalStyle from './GlobalStyle.js';
import theme from './theme.js';
import { ThemeProvider } from 'styled-components';

const App = () => {
  return (
  <ThemeProvider theme={theme}>
    <h1>I belong to the Cool Heading family</h1>
    <span className='subheading'>
      I belong to the Cute Heading family
    </span>
  </ThemeProvider>
  );
}

요약

그래서 당신은 그것을 가지고 있습니다! 이것은 styled-library의 세 가지 중요한 개념인 Interpolation , GlobalStyling 및 ThemeProvider 에 대한 탐구였습니다. 도움이 되었기를 바랍니다!