반응에 CSS를 도입하는 방법

소개 방법은 다음과 같습니다. 1. 인라인 스타일; 2. 선언 스타일, 인라인 스타일은 유사합니다. 차이점은 스타일 시트를 저장하기 위해 변수가 선언되고 스타일 속성에 바인딩된다는 것입니다. 3. 가져오기 소개, React 구성 요소는 다음과 같습니다. 일반적으로 폴더에는 해당 js 및 css가 포함되어 있으며 js에 동일한 수준의 CSS를 도입하면 됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

<div style="color:red">测试数据</div> //报错

React에서는 위와 같은 방식으로 인라인 스타일을 직접 작성하면 바로 오류가 발생합니다. React에서는 다음 세 가지 CSS 작성 방법을 지원하지 않기 때문입니다.

1.

...
<div style={{
    width:&#39;200px&#39;,
    height:&#39;80px&#39;,
    backgroundColor:&#39;yellow&#39;,    　　　　
    fontSize:&#39;24px&#39;,    　　　　
    textAlign:&#39;center&#39;   　　　　
}}>测试数据</div>
...

2 .선언된 스타일

선언된 스타일은 인라인 스타일과 유사하지만 유일한 차이점은 스타일 시트를 저장하기 위해 변수를 선언하고 스타일 속성에 바인딩된다는 것입니다.

...
<div style={{
    width:&#39;200px&#39;,
    height:&#39;80px&#39;,
    backgroundColor:&#39;yellow&#39;,    　　　　
    fontSize:&#39;24px&#39;,    　　　　
    textAlign:&#39;center&#39;   　　　　
}}>测试数据</div>
...

3.import 소개

React 컴포넌트는 일반적으로 해당 js와 css를 포함하는 폴더입니다. js에 동일한 수준의 CSS를 도입하면 됩니다.

import './mystyle.css';

추천 학습:

css 비디오 튜토리얼

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