我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

react项目里面的组件也是基于最基础的html的,所以也是使用样式表来控制表现形式的。在本文中,苏南大叔将要总结的内容是:在react里面写css的技巧及注意事项。这里面的css和普通页面里面的css的使用方式,还是有所不同的。

苏南大叔:react项目,组件文件里面如何编写使用css样式? - react-css
react项目,组件文件里面如何编写使用css样式?(图5-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述在react组件里面使用css的方式方法。测试环境:create-react-app@5.0.1react@18.2.0react-dom@18.2.0node@16.14.2

基本原理

首先回顾一下react项目的基本原理,有利于本文内容的理解。

react项目,基本上都是基于webpack的。可以由create-react-app工具来初始化,也可以自由组合从零开始。参考文章:

webpack可以处理scsssassless等模块,参考文章:

webpack也可以处理模块化css,参考文章:

react中使用css【推荐】

可以使用import来导入css文件。如下:

import './App.css';

app.css:

#t1{
  background-color: red;
}
.t2{
  background-color: yellow;  
}

苏南大叔:react项目,组件文件里面如何编写使用css样式? - 导入appcss
react项目,组件文件里面如何编写使用css样式?(图5-2)

平时的普通页面写的是class属性,而不是className。两者不一样。

<div class="t2">普通html页面,使用class属性</div>

react里面使用css的最常见的使用方式是:使用className属性。

<div className="t2">测试className</div>

也可以使传统的id的形式,来使得css生效。

<div id="t1">测试id</div>

苏南大叔:react项目,组件文件里面如何编写使用css样式? - 级联css写法
react项目,组件文件里面如何编写使用css样式?(图5-3)

react级联使用css

级联使用css,普通的页面里面是这样写的:

<div style='color:red;font-size:18px;'>text</div>

但是在react组件里面,写法却区别很大了。
第一种写法:

var t3={
  backgroundColor:"pink",
  textAlign:"left",
}
<div style={t3}></div>

第二种写法:

<div style={{backgroundColor:"blue",textAlign:"left"}}></div>

完整代码:

import './App.css';
function App() {
  var t3={
    backgroundColor:"pink",
    textAlign:"left",
  }
  return (
    <div className="App">
      <div style={t3}>测试style内联</div>
      <div style={{backgroundColor:"blue",textAlign:"left"}}>测试style内联2</div>
    </div>
  );
}
export default App;

这里把传统的css的写法,变成了js的写法。

  • 由两个单词组成的css属性,都变成了先小写再大写的这种驼峰式写法。
  • 并且值都需要使用双引号括起来。否则就会把对应的值视为变量,需要先定义起来。
  • 使用{{}}的写法。
  • 原本的分号,也变成了逗号。

苏南大叔:react项目,组件文件里面如何编写使用css样式? - 级联css写法2
react项目,组件文件里面如何编写使用css样式?(图5-4)

直接写style

传统的style写法:

<style>button{margin:0px 1px;}</style>

react组件里面的写法:

<style>{"button{margin:0px 1px;}"}</style>

这个写法就绝了,直接写style,全部是熟悉的味道,仅仅加了个{" "}

苏南大叔:react项目,组件文件里面如何编写使用css样式? - style-css-写法
react项目,组件文件里面如何编写使用css样式?(图5-5)

相关链接

总结

react项目,使用css的基本姿势就这么多了。当然,更高级的用法待后续文章说明了。参考链接:

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react