> 웹 프론트엔드 > JS 튜토리얼 > 반응에 스타일을 도입하는 방법

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

coldplay.xixi
풀어 주다: 2020-12-02 17:32:20
원래의
9522명이 탐색했습니다.

리액트에 스타일을 도입하는 방법: 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 &#39;./index.css&#39;;
로그인 후 복사

index.css

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

2. 인라인 스타일

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

 <Divider style={{margin:&#39;0px&#39;}}/>
也是用的style,但书写方式不一样了
로그인 후 복사

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

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿