반응 구성 요소에 스타일을 추가하는 방법

반응 구성 요소에 스타일을 추가하는 방법: 1. 표현식을 통해 스타일 개체를 전달합니다. 2. 인라인 스타일을 사용합니다. 3. 타사 패키지를 통해 클래스 이름을 정의합니다. 4. 스타일이 지정된 구성 요소를 통해 추가합니다. 스타일.

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

React 구성 요소에 스타일을 추가하는 네 가지 방법:

구성 요소의 DOM 스타일

첫 번째 방법: 인라인 스타일

가상 DOM에 인라인 스타일을 추가하려면 표현식을 사용하여 전달해야 합니다. 스타일 개체:

// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
 <p style={{color:&#39;red&#39;, fontSize:&#39;14px&#39;}}>Hello world</p>

인라인 스타일에는 스타일 개체 작성이 필요하며 이 스타일 개체의 위치는 렌더링 기능, 구성 요소 프로토타입 또는 외부 링크 js 파일 등 여러 위치에 배치될 수 있습니다

두 번째 유형: className (외부 참조)

React는 인라인 스타일을 사용할 것을 권장합니다. 왜냐하면 React는 각 구성 요소가 독립적인 전체라고 생각하기 때문입니다.

사실 대부분의 경우 여전히 많은 수의 클래스 이름을 요소에 추가하지만 클래스는 className으로 작성해야 한다는 점에 유의해야 합니다(결국 js와 유사한 코드를 작성하고 js 규칙에 의해 제한되며 class는 키워드이기 때문입니다)

<p className="hello" style = {this.style}>Hello world</p>

세 번째 유형: classname/classnames third -파티 패키지 정의 클래스 이름

때때로 다른 조건에 따라 다른 항목을 추가해야 하는 경우도 있습니다. 예를 들어 완료 상태, 완료됨은 녹색, 미완료됨은 빨간색입니다. 이 경우에는 classname/classnames 패키지를 사용하는 것이 좋습니다:

<p
    className = { 
        classname({
            size: true,
            bg: true
        })
    }
> 第三包classname定义 </p>

네 번째 유형: styled-comComponents

styled-comComponents는 React용으로 작성된 css-in-js 프레임워크 세트입니다. 간단히 말하면 CSS를 작성한다는 의미입니다. js에서. npm link

styled-comforts는 타사 패키지이므로 설치해야 합니다

const Container = styled.div`
    width: 100px;
    height: 100px;
    background: pink;
    color: white;
`

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