React 구성 요소에 CSS를 추가하는 방법

구성 요소에 이러한 놀라운 스타일을 적용하는 방법을 고민하고 계십니까? 더 이상 걱정하지 마세요. 여기서는 아름다운 디자인을 구현하는 데 도움이 되는 세 가지 방법에 대해 논의하겠습니다. 이 글을 읽으면서 CSS와 Javascript에 대한 어느 정도 이해하고 있으면 좋습니다. 뛰어들어 보세요!

1. CSS 스타일시트 사용

여기에는 별도의 파일에 자신만의 CSS 스타일을 작성한 다음 이를 구성 요소로 가져오는 작업이 포함됩니다.
파일 이름을 지정할 때 .css 확장자를 사용해야 합니다. 아래 예시코드를 확인해보세요.

//CSS 파일

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//CSS 파일을 구성 요소로 가져옵니다.
// CSS 파일에 원하는 이름을 지정합니다.

import './App.css';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );

}
}

1. CSS 모듈 사용

첫 번째 방법이 마음에 들지 않을 수도 있고, 코드 작성 방식이 맞지 않을 수도 있습니다.
두 번째 방법을 사용할 수 있습니다. 여기에서는 CSS를 작성할 별도의 파일도 만들지만 이번에는 다른 확장자를 사용합니다. .module.css

// CSS 모듈.
// mystyle.module.css

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//모듈을 구성 요소로 가져옵니다.

import styles from './mystyle.module.css'; 

class Car extends React.Component {
  render() {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
}

1. 인라인 스타일링 사용

스타일 속성 style='styles here'를 사용하여 인라인 스타일을 구현할 수 있습니다. 그러나 스타일 속성에 들어가는 값은 일반적인 CSS 선택자가 아니라 자바스크립트 객체이므로 주의해야 합니다. 객체의 구문을 취해야 합니다.

이것이 바로 그 뜻입니다.

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

이중 중괄호를 확인하고 자바스크립트 객체를 작성하는 데 사용되는 키:값 쌍 구문도 확인하세요.

유념해야 할 또 다른 사항은 background-color와 같은 두 개의 이름이 있는 사물 속성을 작성할 때 하나는 camelCase backgroundColor를 사용해야 한다는 것입니다

팁: 모든 스타일 코드를 사용하여 개체를 생성하고 스타일 속성에서 호출할 수 있습니다.

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

이중 중괄호가 없다는 점에 유의하세요.

이 내용이 도움이 되었고 재미있게 읽으셨기를 바랍니다. 다음 글 작성을 개선할 수 있도록 피드백을 환영합니다. 감사합니다

위 내용은 React 구성 요소에 CSS를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!