React.js의 CSS 사용법

이번에는 React.js에서 CSS를 사용하는 방법을 알려드리겠습니다. React.js에서 CSS를 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다. 인라인 스타일 (웹 개발에는 권장되지 않지만 React-Native에서 널리 사용됨)

단점은 애니메이션, 의사 클래스(호버) 등을 사용할 수 없다는 점입니다.

import React from 'react';export default class ComponentHeader extends React.Component {
render() {    const styleComponentHeader = {        header: {            backgroundColor: '#333333',            color: '#FFFFFF',            "padding-top": '15px',            paddingBottom: '15px'
        },        // 还可以定义其他的样式
    };    return (        <header>
            <h1>这里是头部</h1>
        </header>
    )
  }
}

2. 인라인 스타일 Formula

: 클릭하면 padding-top 및 paddingBottom이 커지거나 작아집니다

import React from 'react';export default class ComponentHeader extends React.Component {constructor() {  super();  this.state = {      miniHeader: false
  };
}
switchHeader() {  this.setState({      miniHeader: !this.state.miniHeader
  });
};
render() {  const styleComponentHeader = {      header: {          backgroundColor: '#333333',          color: '#FFFFFF',          "padding-top": this.state.miniHeader ? '3px' : '15px',          paddingBottom: this.state.miniHeader ? '3px' : '15px'
      },      // 还可以定义其他的样式
  };      return (          <header style={styleComponentHeader.header} onClick={this.switchHeader.bind(this)}>
              <h1>这里是头部</h1>
          </header>
      )
  }
}

3. CSSModular

첫 번째 npm은 다음 세 가지 플러그인

"babel-plugin-react-html-attrs": "^2.0.0","style-loader": "^0.13.1","css-loader": "^0.25.0"

을 사용하여 babel-plugin-react-html-입니다. 속성 플러그인은 태그에 클래스를 추가할 때 클래스를 직접 사용할 수 있습니다

<h1 class="smallFontSize">这里是头部</h1>

이 플러그인을 사용하기 전에는 클래스를 사용할 수 없으며 클래스 이름

<h1 className="smallFontSize">这里是头部</h1>

만 사용할 수 있습니다.4. CSS 스타일

사용하려는 측면의 코드를 복사하세요. 구체적인 사용법은 다음과 같습니다.

import React from 'react';export default class ComponentFooter extends React.Component {
render() {    var footerConvertStyle = {        "miniFooter": {            "backgroundColor": "#333333",            "color": "#ffffff",            "paddingLeft": "20px",            "paddingTop": "3px",            "paddingBottom": "3px"
        },        "miniFooter_h1": {            "fontSize": "15px"
        }
    }    return (        <footer style={footerConvertStyle.miniFooter}>
            <h1 style={footerConvertStyle.miniFooter_h1}>这是页脚, 一般放置版权的一些信息.</h1>
        </footer>
    )
  }
}

이 글의 사례를 읽으신 후 방법을 익히셨을 것입니다. 더 흥미로운 정보를 알고 싶으시면 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천 자료:

Vue.js는 전환 애니메이션을 사용하여 경로 점프 애니메이션을 만듭니다

Vue.js의 경로 이름 지정 및 이름 지정 보기

Vue.js의 경로 매개 변수

위 내용은 React.js의 CSS 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!