반응에 CSS를 작성하는 방법

반응에서 CSS를 작성하는 방법: 1. className을 통해 클래스 이름의 DOM 요소에 스타일을 추가합니다. 2. 해당 DOM 요소에 스타일 속성을 직접 추가합니다. 3. 전역 변수 스타일을 정의하여 CSS를 정의합니다.

이 기사의 운영 환경: windows7 시스템, React17.0.1&&css3 버전, Dell G3 컴퓨터.

반응에서 CSS 스타일을 작성하는 방법은 무엇입니까?

JSX의 기본 구문에는 React

1에서 CSS 스타일을 작성하는 방법에 대한 세 가지 주요 방법이 있습니다. 클래스 -- (className)

className을 기반으로 클래스의 DOM 요소에 스타일을 추가합니다. className

<style>
.title{
    color:blue;
}
</style>
<div id=&#39;app&#39;></div>
//创建一个叫App类，继承（extends)了react中创建组件的方法(component)
class App extends React.Component{
    constructor(props){  
        super(peops)
    }
    render(){   //类里面负责构建HTML的位置，render渲染
        return(  //返回HTML结构
        <div  className="title">高版本</div>
        
        )
    }
}
//将虚拟DOM以组件标签的形式渲染到id为&#39;app&#39;的真实DOM之间
ReactDOM.render(<App/>,document.getElementById(&#39;app&#39;))

를 통해 스타일에 이름 지정

<div id=&#39;app&#39;></div>
class App extends React.Component{
    constructor(props){  
        super(peops)
    }
    render(){   
        return( 
    
         <div style={{color:&#39;red&#39;}}>hello 行间样式</div>
   
        )
    }
}
//将虚拟DOM以组件标签的形式渲染到id为&#39;app&#39;的真实DOM之间
ReactDOM.render(<App/>,document.getElementById(&#39;app&#39;))

2. 내부 CSS(페이스북에서 주장하는 방식) 인터라인 스타일(json)을 기반으로 페이스북은 인터라인 스타일을 옹호하고, 해당 DOM 요소에 스타일 속성을 직접 추가하고, 반응 규칙을 따릅니다. { } 안에 적어주세요.

<div id=&#39;app&#39;></div>
//全局样式方法
var color={color:&#39;red&#39;}
class App extends React.Component{
    constructor(props){  
        super(peops)
    }
    render(){   
        return( 
         <div style={color}>react全局行间样式</div>
         //this 指向组件本身
         <div style={this.col}>原型样式</div>
        )
    }
}
//原型链样式的写法，在创建完以及渲染中间的位置添加原型上的样式
App.prototype.col={
    color:pink  
}
//将虚拟DOM以组件标签的形式渲染到id为&#39;app&#39;的真实DOM之间
ReactDOM.render(<App/>,document.getElementById(&#39;app&#39;))

3. 프로토타입 체인 및 전역 변수

전역 변수를 정의하여 CSS 스타일을 정의할 수 있으며, 이 스타일을 적용하는 DOM 요소를 직접 호출할 수 있습니다.

프로토타입 체인에서 스타일을 추가하는 위치에 주의해야 합니다. 호출 시 this가 컴포넌트에 전달됩니다.

rrreee

위는 React에서 CSS 스타일을 작성하는 세 가지 방법입니다. 오류가 발생했습니다. 정정해 주세요.

추천: "

react 비디오 튜토리얼"

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