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

末蓝、 2022-09-04 03:51 193阅读 0赞

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

[https://blog.csdn.net/datouniao1/article/details/119569890][https_blog.csdn.net_datouniao1_article_details_119569890]

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

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

![20210810203220305.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

内容如下：

.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

如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

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

安装style-loader,css-loader

cnpm i style-loader css-loader -D

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

配置rules：

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6][]

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

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

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

我们打印看一下：

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 7][]

这样我们比如要使用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>

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 8][]

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

希望对你有所帮助

[https_blog.csdn.net_datouniao1_article_details_119569890]: https://blog.csdn.net/datouniao1/article/details/119569890
[20210810203220305.png]: /images/20220829/d4759f35653644d6984d12416c80e047.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/516a4349e21d4582a4b89a9b2e1fcf45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/2b82a2dc56b3423f87d91d019d938462.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/2cb061f151a44a44bcf1992cce87d0fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: /images/20220829/40c8946f2ee142bcbae83a6b700ed1bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4]: /images/20220829/d0e2a5a8f9a34872adb00c352e79e68b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5]: /images/20220829/0e1469fa2e574bf595574f2145b6982c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6]: /images/20220829/6b1915820ce9480990d98f6bde37b7e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 7]: /images/20220829/5a3f84b6fe454148af80a016390ac4ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 8]: /images/20220829/704f31b50c474861801fcc61cc93b167.png