반응에 CSS를 도입할 수 있나요?

React는 CSS를 도입할 수 있습니다. 방법: 1. CSS를 도입하려면 구성 요소 내에서 직접 "style={{css style}}"을 사용합니다. 2. 먼저 렌더링 함수에서 변수를 선언하여 스타일 시트를 저장하고 스타일 속성을 참조한 다음 "import 'css path'"를 사용하여 CSS 파일을 가져옵니다.

이 튜토리얼의 운영 환경: windows7 시스템, React16 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천 학습: "프로그래밍 비디오"

Css를 React에 도입할 수 있습니다. 다만, 아래와 같은 방법으로 인라인 스타일을 직접 작성하게 되면 JSX 문법을 지원하지 않기 때문에 바로 에러가 발생하게 됩니다.

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

React는 CSS를 작성하는 다음 세 가지 방법을 지원합니다. [관련 튜토리얼 권장 사항: React 비디오 튜토리얼]

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 내부에서 직접 정의됩니다. function 먼저 선언하고 인용하세요

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

render() {
    let mystyle = {
         width:'200px',
		 height:'80px',
		 backgroundColor:'yellow',    　　　　
		 fontSize:'24px',    　　　　
		 textAlign:'center'   　
    }
    return(
        <div style={mystyle}>
            测试数据
        </div>
    );
}

3. import를 사용하여 외부 CSS 스타일 파일을 도입하세요

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

import './mystyle.css';

더 많은 관련 글을 읽고 싶으시면 PHP 중국어 홈페이지를 방문해 주세요! !

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