반응에 스타일을 도입하는 방법

리액트에 스타일을 도입하는 방법: 1. 모듈 스타일, 도입 방법 [import './index.css';] 2. 인라인 스타일, 코드는 [].

관련 학습 권장 사항: react 비디오 튜토리얼

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

리액트에 스타일을 도입하는 방법:

1. 모듈 스타일

처음 프레임워크를 구축하고 비즈니스 작성을 준비할 때 첫 페이지에서 스타일을 도입하는 방법을 접하게 됩니다. 스타일을 사용하는 대신 CSS를 직접 가져올 필요가 없습니다. 가져오기 방법은 다음과 같습니다.

<div className=&#39;topHead back fs14&#39;>
     <img src=&#39;/images/highLevel.png&#39; className=&#39;levelSize&#39;/>
</div>

className

소개 방법

import './index.css';

index.css

@import '~antd/dist/antd.css';
.topHead {
    width: 100%;
    height: 100px;
    display: flex;  
    align-items: center;
}
.back{
    background-image: url('/images/homeBackImg.png');
}
.levelSize{
    width: 80px;
    height: 80px; 
}
.levelColor{
    color:#ffffff;
}

2. 인라인 스타일

인라인 스타일은 일반 스타일='margin:0px' 과 다르기 때문에 이렇습니다

 <Divider style={{margin:&#39;0px&#39;}}/>
也是用的style，但书写方式不一样了

관련 무료 학습 권장 사항: javascript(동영상)

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