리액트에 스타일을 도입하는 방법: 1. 모듈 스타일, 도입 방법 [import './index.css';] 2. 인라인 스타일, 코드는 [
].
관련 학습 권장 사항: react 비디오 튜토리얼
이 튜토리얼의 운영 환경: windows7 시스템, React17 버전, 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
리액트에 스타일을 도입하는 방법:
1. 모듈 스타일
처음 프레임워크를 구축하고 비즈니스 작성을 준비할 때 첫 페이지에서 스타일을 도입하는 방법을 접하게 됩니다. 스타일을 사용하는 대신 CSS를 직접 가져올 필요가 없습니다. 가져오기 방법은 다음과 같습니다.
<div className='topHead back fs14'> <img src='/images/highLevel.png' className='levelSize'/> </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:'0px'}}/> 也是用的style,但书写方式不一样了
관련 무료 학습 권장 사항: javascript(동영상)
위 내용은 반응에 스타일을 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!