계획한 모든 정보를 포함하는 React 구성 요소를 만들고 있습니다. 문제는 그들이 당신이 상상했던 대로 보이지 않는다는 것입니다. 외부 라이브러리를 다운로드할 필요 없이 구성 요소의 스타일을 지정하는 옵션을 살펴보겠습니다.

우리가 시작하는 것

이 기사의 나머지 부분에서는 이미지, h1 및 h2와 함께 React 구성 요소를 사용합니다. 전체적으로 일정하게 유지되며 매번 같은 스타일을 지정합니다. 우리는 그것을 달성하기 위해 다른 방법을 사용할 것입니다.

스타일링이 없는 베어본 React Component:

import casaDelArbol from '../images/CSS-in-React.JPG'

function StyledReactComponent() {
  return (
    <div>
      <img src={casaDelArbol}/>
      <h1>Casa Del Arbol</h1>
      <h2>Banos, Ecuador</h2>
    </div>
  );
}

export default StyledReactComponent;

이는 우리에게 다음을 제공합니다.



img, h1 및 h2의 세 가지 요소를 포함하는 div가 있습니다. 이미지 이름은 "CSS-in-React.JPG"이고 "images"라는 폴더에 있습니다. 거기에서 StyledReactComponent로 가져오고 casaDelArbol이라는 이름을 지정합니다.

구성 요소의 모양을 원하는 방식

구성 요소에서 변경하려는 내용은 다음과 같습니다.

DIV

배경색 변경

테두리를 줘

모퉁이를 둥글게

IMG

전체 div를 덮지 않고 더 작게 만듭니다

.

여백을 줘

모퉁이를 둥글게

H1

텍스트 중앙 정렬

텍스트에 밑줄 긋기

색상 변경

여백 줄이기

H2

텍스트 중앙 정렬

텍스트를 기울임꼴로 표시

색상 변경

여백 줄이기

옵션 #1: 인라인 스타일링

해당 구성 요소의 JSX 내에서 각 요소의 스타일을 지정할 수 있습니다. 이를 달성하려면 다음 구문을 사용해야 합니다.

style={{}}

몇 가지 참고 사항:

이중 중괄호를 사용해야 합니다

.

CSS 속성이 camelCase임(텍스트 정렬이 textAlign이 됨)

콜론이 속성 이름 뒤에 옵니다

.

속성 값이 따옴표 안에 있음

여러 속성을 쉼표로 구분하여 사용할 수 있습니다

.

다음은 인라인 스타일을 사용하는 구성 요소입니다.

function StyledReactComponent() {
    return (
        <div style={{backgroundColor: ' #F8F0E3', width: '400px', border: '5px solid #6C5B7B', borderRadius: '10px'}}>
            <img style={{width: '90%', marginRight: '5%', marginLeft: '5%', marginTop: '10px', borderRadius: '5px'}} src={casaDelArbol}/>
            <h1 style={{textAlign: 'center', margin: '3px', color: '#355C7D', textDecoration: 'underline'}}>Casa Del Arbol</h1>
            <h2 style={{textAlign: 'center', margin: '3px', color: '#6C5B7B', fontStyle: 'italic'}}>Banos, Ecuador</h2>
        </div>
    );
}

다음을 반환합니다.



Enter 키를 누르고 코드를 재정렬하여 속성을 별도의 줄에 배치할 수 있지만 여러 속성을 사용하는 경우 인라인 스타일로 인해 코드를 읽기가 훨씬 더 어려워질 수 있습니다. 인라인 스타일 지정은 구현하기 가장 빠르고 쉬운 방법이지만 제한적으로 사용할 때 가장 적합합니다. 가능한 예는 요소의 아래쪽 여백을 변경하려는 경우입니다.

옵션 #2: 변수를 사용한 인라인 스타일링

모든 스타일 속성을 가진 각 스타일 요소에 대한 변수를 생성하여 코드를 약간 정리할 수 있습니다.

function StyledReactComponent() {

  const styledDiv = {
    backgroundColor: ' #F8F0E3', 
    width: '400px', 
    border: '5px solid #6C5B7B', 
    borderRadius: '10px'
  }
  const styledImg = {
    width: '90%', 
    marginRight: '5%', 
    marginLeft: '5%', 
    marginTop: '10px', 
    borderRadius: '5px'
  }
  const styledH1 = {
    textAlign: 'center', 
    margin: '3px', 
    color: '#355C7D', 
    textDecoration: 'underline'
  }
  const styledH2 = {
    textAlign: 'center', 
    margin: '3px', 
    color: '#6C5B7B', 
    fontStyle: 'italic'
  }

  return (
    <div style={styledDiv}>
      <img style={styledImg} src={casaDelArbol}/>
      <h1 style={styledH1}>Casa Del Arbol</h1>
      <h2 style={styledH2}>Banos, Ecuador</h2>
    </div>
  );
}

참고: JSX 내에서 style={variable}을 정의할 때 단일 대괄호를 사용해야 합니다.

옵션 #3: className 정의 및 CSS 파일 사용

이것은 React Docs에서 권장하는 방법으로, "CSS 클래스는 일반적으로 인라인 스타일보다 성능면에서 더 좋습니다."라고 명시되어 있습니다.

CSS 파일 내부:

.styled-div {
  background-color: #F8F0E3;
  width: 400px;
  border: 5px solid #6C5B7B;
  border-radius: 10px;
}

.styled-img {
  width: 90%; 
  margin-right: 5%; 
  margin-left: 5%; 
  margin-top: 10px; 
  border-radius: 5px;
}

.styled-h1 {
  text-align: center; 
  margin: 3px; 
  color: #355C7D; 
  text-decoration: underline;
}

.styled-h2 {
  text-align: center; 
  margin: 3px; 
  color: #6C5B7B; 
  font-style: italic;
}

그리고 우리의 시끄럽고 깨끗한 React 컴포넌트:

function StyledReactComponent() {

  return (
    <div className='styled-div'>
      <img className='styled-img' src={casaDelArbol}/>
      <h1 className='styled-h1'>Casa Del Arbol</h1>
      <h2 className='styled-h2'>Banos, Ecuador</h2>
    </div>
  );
}

몇 가지 참고 사항:

className이 React 구성 요소에서 camelCased입니다

.

className이 따옴표 안에 선언됨

CSS 파일에서 클래스 이름 앞의 점은 클래스임을 나타냅니다

.

여러 단어를 포함할 때 CSS의 속성에 대시가 있습니다

.

CSS에 따옴표나 쉼표가 포함되지 않음

CSS 파일을 React 프로젝트로 가져와야 합니다. index.css 파일과 같은 하나의 파일을 사용하여 프로젝트의 모든 스타일 지정을 정의하는 경우 가장 높은 수준의 구성 요소인 App 구성 요소의 맨 위에서 가져올 수 있습니다.

import '../index.css';

또는

import './index.css';

CSS 파일의 위치에 따라 다릅니다.

또 다른 옵션은 이 구성 요소와 관련된 모든 스타일을 포함하는 이 구성 요소 전용 CSS 파일을 만드는 것입니다. 그런 다음 이 CSS 파일을 StyledReactComponent 파일의 맨 위에 가져올 수 있습니다.

즐거운 코딩하세요!