react项目，组件文件里面如何编写使用css样式？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

基本原理

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

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

• https://newsn.net/say/create-react-app.html
• https://newsn.net/say/webpack-react-diy.html

webpack可以处理scss、sass、less等模块，参考文章：

• https://newsn.net/say/webpack-css.html
• https://newsn.net/say/webpack-scss.html

webpack也可以处理模块化css，参考文章：

• https://newsn.net/say/webpack-css-module.html

className和id

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

import './App.css';

app.css:

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

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

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

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

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

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

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

原生js里面也是使用.className修改或访问class属性的。class应该是关键字的缘故，才会被改名。

{{ }}

级联使用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属性，都变成了先小写再大写的这种驼峰式写法。
• 并且值都需要使用双引号括起来。否则就会把对应的值视为变量，需要先定义起来。
• 使用{{}}的写法。
• 原本的分号，也变成了逗号。

{" "}

传统的style写法：

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

在react组件里面的写法：

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

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

{ 折行 }

如果想对css进行折行书写，可以采用下面的方式。（区别在于引号的使用！）：

<style>
  { 
    `span.active{
      color:red;
    }` 
  }
</style>

相关链接

• https://newsn.net/say/webpack-css.html
• https://newsn.net/say/webpack-scss.html
• https://newsn.net/say/webpack-css-module.html

总结

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

• https://newsn.net/tag/react/

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