React 项目----className 样式（13）

在上一篇的博客中，我们介绍了react中的style 内联的样式

https://blog.csdn.net/datouniao1/article/details/119569890

但是我们仔细的观察，这样编写样式，着实有点麻烦，我们习惯于平时使用的css 文件导入相关的样式，然后class 等于某一个值。那么应该如何来实现这一功能

首先我们在src 文件夹下面新建一个文件夹 css ，我们写的css的文件到放到这个文件夹下面

我们之前使用的是一个评论的列表的实例，这个地方我们继续来完成，那么之前我们把css 的相关的样式都写成了变量，并且存在到了一个css.js 的文件中，现在我们在src/css/文件夹下面新建一个CommList.css 文件

内容如下：

.title{ color:red;font-size: 1.5rem;text-align: center;
}
.mydiv{padding-left:10px;border:2px solid #ccc;margin-bottom:10px
}
.cmtuser{font-size:1.0rem;color:blue
}

那么我们的css 是独立的，那么肯定要在使用的地方引入.css 文件，所以在index 中需要导入CommList.css

如下：

webpack.config.js 这个配置文件：

项目并不知道.css 文件到底是什么东西，该如何解析，随意我们安装一些模块能解析css 文件

安装style-loader,css-loader

cnpm i style-loader css-loader -D

配置rules：

......   module:{rules:[{test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/},{test:/\.css$/,use:['style-loader','css-loader']}]},
......

然后重新启动项目：npm run dev

启动之后，我们如何引入这些样式：

因为class 是关键字，所以我们采用className 来引用样式，效果如下：

总结：上面我们介绍了React 如何来使用外部的css 文件，并且在使用的时候用className

这个关键字，需要安装style-loader 和css-loader

当然，有的时候我们配置为了解决作用于的问题，常常在配置css-loader的时候增加一个参数：

我们把css-loader 的配置修改成为了：

 {test:/\.css$/,use:['style-loader',{loader:'css-loader',options:{modules:true}}]}

这个是启用css 的模块化，那么这样的配置有什么样的作用呢，这个是将我们导入的css 转换为一个对象，通过这个对象可以将文件中定义的样式点出来

我们打印看一下：


import cssobj from '@/css/CommList.css'
console.log(cssobj);

我们看一下控制台输出的效果：

这样我们比如要使用title的样式可以将代码修改为如下：

        return <div><h1 className={cssobj.title}>下面是评论列表</h1>{this.state.commentList.map((item,index)=>{return <div key={item.id} className={cssobj.mydiv}><h1 className={cssobj.cmtuser}>评论人： {item.user}</h1><p>评论内容： {item.content}</p></div>})}</div>

效果如下：

以上我们看到了如何在项目中引入相关的css文件，以及启动css 文件的模块化的功能

希望对你有所帮助

React 项目----className 样式（13）相关推荐

React 项目----内联样式style的使用（12）
在此我们之前学习了react的基本的语法,对于页面我们还经常关注的是页面的样式,那么react 项目中,我们应该如何使用样式首先我们来做一个简单的页面一个评论的列表模拟数据: commentLis ...
构建一个react项目_您想要了解更多有关React的内容吗？让我们构建一个游戏，然后玩。...
构建一个react项目 by Samer Buna 通过Samer Buna 您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩. (Do you want to learn more ...
前端—react项目及版本更新对比
介绍: 项目搭建逻辑:1)项目中index.html中渲染的内容.2)看main.js中绑定的组件渲染 React框架由Facebock开源的一款前端框架. 工作中使用的版本: react:16.2 ...
2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...
中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...
react安装_超全面详细一条龙教程！从零搭建React项目全家桶（上篇）
React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...
react中样式冲突_如何通过React中的样式使您的应用漂亮
react中样式冲突 by Vinh Le 由Vinh Le 如何通过React中的样式使您的应用漂亮 (How to make your apps pretty with styling in Re ...
react 图片放在src里面还是public_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...

React 项目----className 样式（13）

React 项目----className 样式（13）相关推荐

最新文章

热门文章

React 项目----className 样式 （13）

React 项目----className 样式 （13）相关推荐

最新文章

热门文章

React 项目----className 样式（13）

React 项目----className 样式（13）相关推荐