react里面怎么写css-木庄网络博客

react里面怎么写css

2022-02-21 08:49:38 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者藏色散人，侵删。

react里面写css的方法：1、通过className在style中给该class名的DOM元素添加样式；2、直接给对应的DOM元素添加style属性；3、通过定义全局变量的方法来定义一个css样式。

本文操作环境：windows7系统、react17.0.1&&css3版本、Dell G3电脑。

react里面怎么写css样式？

JSX基本语法中关于react如何写css样式主要有三种方法

1、基于class --（className）

基于className ,通过className在style中给该class名的DOM元素添加样式

<style>
.title{
    color:blue;
}
</style>
<div id='app'></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为'app'的真实DOM之间
ReactDOM.render(<App/>,document.getElementById('app'))