React에서 CSS 스타일을 작성하는 5가지 방법

nordschool에 원래 게시됨 .

There are many ways to style your React components. 🤓

이 가이드에서는 React 구성 요소의 스타일을 지정하는 방법을 다룹니다. 5가지 다른 방법을 보여 드리며 가장 선호하는 방법을 선택하세요! 😁

원하는 방식으로 구성 요소 스타일 지정

다음은 우리가 논의할 구성 요소 스타일 지정 방법입니다.

Regular CSS

Inline Styling

CSS Modules

Preprocessors

CSS in JS

다른 구성 요소 스타일 지정 방법을 사용하여 아래의 동일한 스타일을 대체할 것입니다.

/* BeautifulButton.css */

.button {
  color: #494949;
  text-transform: uppercase;
  text-decoration: none;
  background: #ffffff;
  padding: 20px;
  font-size: 20px;
  border: 4px solid #494949;
  display: inline-block;
  transition: all 0.4s ease 0s;
}

.button:hover {
  color: #ffffff;
  background: #f6b93b;
  border-color: #f6b93b;
  transition: all 0.4s ease 0s;
}

.button--primary {
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  background: #f6b93b;
  padding: 20px;
  font-size: 20px;
  border: 4px solid #f6b93b;
  display: inline-block;
  transition: all 0.4s ease 0s;
}

.button--primary:hover {
  color: #494949;
  background: #ffffff;
  border-color: #494949;
  transition: all 0.4s ease 0s;
}

일반 CSS

이것은 React 컴포넌트에 스타일을 추가하는 가장 쉽고 직접적인 방법입니다.

import React from 'react';
import './BeautifulButton.css';

const MyBeautifulButton = props => {
  return (
    <div>
      <button className={props.primary ? 'button--primary' : 'button'}>
        Button
      </button>
    </div>
  );
};

export default MyBeautifulButton;

인라인 스타일링

import React from 'react';

const MyBeautifulButton = props => {
  const button = {
    color: '#494949',
    textTransform: 'uppercase',
    textDecoration: 'none',
    background: '#ffffff',
    padding: '20px',
    fontSize: '20px',
    border: '4px solid #494949',
    display: 'inline-block',
    transition: 'all 0.4s ease 0s'
  };

  const primaryButton = {
    ...button,
    color: '#ffffff',
    background: '#f6b93b',
    borderColor: '#f6b93b'
  };

  return (
    <div>
      <button style={props.primary ? primaryButton : button}>Button</button>
    </div>
  );
};

export default MyBeautifulButton;

Note: The camel-case is necessary for the inline-styling to work! For example, borderColor.

인라인 스타일은 간단하고 즉시 사용할 수 있지만 많은 제한 사항이 있습니다.

예를 들어 호버 효과를 추가하는 직접적인 방법은 없습니다.

Recommendation: Use the inline-styling paradigm only with small simple components. 😇

CSS 모듈

import React from 'react';

import styles from './my-beautiful-button.module.css'; // must have extension .module.css.
// my-beautiful-button.module.css has the same styles as Button.css.

const MyBeautifulButton = props => {
  return (
    <div>
      <button
        className={props.primary ? styles['button--primary'] : styles.button}
      >
        Button
      </button>
    </div>
  );
};

export default MyBeautifulButton;

CSS 모듈의 모든 스타일은 가져온 해당 구성 요소 내에서 범위가 지정됩니다. 즉, 전역 이름 충돌에 대해 걱정할 필요가 없습니다. 😌

Note: You must include the sub-extension .module in the name. Otherwise the styles will load as regular CSS and you may have name-conflicts.

전처리기

SCSS , LESS 또는 Stylus 과 같은 전처리기를 사용하는 것은 React에서 간단합니다.

전처리기 로더를 추가한 다음 일반 CSS와 같은 방식으로 파일을 가져올 수 있습니다.

import React from 'react';
import './button.scss'; // <-- Once webpack configs have the right loader this should work like regular scss.

const MyBeautifulButton = props => {
  return (
    <div>
      <button className={props.primary ? 'button--primary' : 'button'}>
        Button
      </button>
    </div>
  );
};

export default MyBeautifulButton;

JS의 CSS

JS의 CSS는 구성 요소 내부의 모든 스타일을 정의하는 패턴입니다. 인라인 스타일과 비슷하지만 훨씬 더 강력합니다.

Styled Components 및 Emotion 을 사용하여 동일한 버튼 스타일을 작성하는 방법을 살펴보겠습니다.

스타일이 지정된 구성 요소

import React from 'react';

import styled from 'styled-components';

const MyBeautifulButton = props => {
  const BeautifulButton = styled.button`
    color: #494949;
    text-transform: uppercase;
    text-decoration: none;
    background: #ffffff;
    padding: 20px;
    font-size: 20px;
    border: 4px solid #494949;
    display: inline-block;
    transition: all 0.4s ease 0s;
    &:hover {
      color: #ffffff;
      background: #f6b93b;
      border-color: #f6b93b;
      transition: all 0.4s ease 0s;
    }
  `;

  const BeautifulPrimaryButton = styled(Button)`
    color: #ffffff;
    background: #f6b93b;
    border-color: #f6b93b;
    &:hover {
      color: #494949;
      background: #ffffff;
      border-color: #494949;
    }
  `;

  return (
    <div>
      {props.primary ? (
        <BeautifulPrimaryButton>Button </BeautifulPrimaryButton>
      ) : (
        <BeautifulButton>Button</BeautifulButton>
      )}
    </div>
  );
};

export default MyBeautifulButton;

감정

Emotion에는 스타일을 추가하는 두 가지 방법인 css API와 styled API가 있습니다.

다음은 css API를 사용하는 방법의 예입니다.

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/* @jsx jsx */
import React from 'react';
import { jsx, css } from '@emotion/core';

const BeautifulButton = css`
  color: #494949;
  text-transform: uppercase;
  text-decoration: none;
  background: #ffffff;
  padding: 20px;
  font-size: 20px;
  border: 4px solid #494949;
  display: inline-block;
  transition: all 0.4s ease 0s;
  &:hover {
    color: #ffffff;
    background: #f6b93b;
    border-color: #f6b93b;
    transition: all 0.4s ease 0s;
  }
`;

const BeautifulPrimaryButton = css`
  ${Button};
  color: #ffffff;
  background: #f6b93b;
  border-color: #f6b93b;
  &:hover {
    color: #494949;
    background: #ffffff;
    border-color: #494949;
  }
`;

const MyBeautifulButton = props => {
  return (
    <div>
      <button css={props.primary ? BeautifulPrimaryButton : BeautifulButton}>Button</button>
    </div>
  );
};

export default MyBeautifulButton;

Emotion의 스타일 API는 Styled Components와 매우 유사합니다. 다음은 예입니다.

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/* @jsx jsx */
import React from 'react';
import { jsx, css } from '@emotion/core';

import styled from '@emotion/styled';

const BeautifulButton = styled.button`
color: #494949;
text-transform: uppercase;
text-decoration: none;
background: #ffffff;
padding: 20px;
font-size: 20px;
border: 4px solid #494949;
display: inline-block;
transition: all 0.4s ease 0s;
&:hover {
  color: #ffffff;
  background: #f6b93b;
  border-color: #f6b93b;
  transition: all 0.4s ease 0s;
}
`

const BeautifulPrimaryButton = styled(BeautifulButton)`
color: #ffffff;
background: #f6b93b;
border-color: #f6b93b;
&:hover {
  color: #494949;
  background: #ffffff;
  border-color: #494949;
}
`

const MyBeautifulButton = (props) => {
  return (
    <div>
      {props.primary ? <BeautifulPrimaryButton>Button </BeautifulPrimaryButton> : <BeautifulButton>Button</BeautifulButton>}
    </div>
  );
};

export default MyBeautifulButton;

Note: You can add a babel plugin to avoid writing the required file's top line.

/** @jsx jsx */

JS의 CSS는 강력한 패턴입니다. 크고 복잡한 웹 애플리케이션을 구축할 때 많은 일을 더 쉽게 해줍니다.

Styled Components와 Emotion 사이에는 한 가지 주요 차이점이 있습니다.

Styled Component는 Styled API만 제공합니다. 그러나 Emotion은 스타일을 추가하는 두 가지 방법인 css와 styled API를 제공합니다.

Recommendation: For large applications, we would recommend using Emotion. 👌

체크아웃할 가치가 있는 JS 라이브러리의 다른 CSS는 다음과 같습니다.

Radium

JSS

Aphrodite

이제 구성 요소 스타일링에 관한 옵션을 알게 되었습니다! 어느 것을 더 선호 해? 🤔


지원하다

기사를 즐겼습니까? Twitter에서 요약 스레드를 공유합니다.









노드스쿨


@nordschool






React 구성 요소의 스타일을 지정하는 방법에는 여러 가지가 있습니다. 어느 것을 더 선호 해? 🤔- 일반 CSS- 인라인 스타일링- CSS 모듈- 전처리기- JSTHREAD의 CSS... 👇


오후 12:17 - 2019년 10월 18일





2

2





더 나은 코드 월요일 뉴스레터

내 뉴스레터를 좋아할 수도 있습니다. 아이디어는 매주 월요일 3개의 웹 개발 팁을 공유하는 것입니다.

저의 목표는 작문 실력을 향상시키고 최대한 많은 지식을 공유하는 것입니다. 지금까지 수백 명의 개발자가 구독했고 좋아하는 것 같습니다.

내가 어떤 종류의 물건을 공유하는지 감을 잡으려면 previous newsletter issues 및 subscribe 을 확인하십시오.