React 学习笔记 —— css 样式的模块化

最新推荐文章于 2024-02-20 09:40:44 发布
最新推荐文章于 2024-02-20 09:40:44 发布
阅读量773 收藏 3
点赞数
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TL18382950497/article/details/115419568
版权

问题描述

  • 当不同组件中的css规则，存在冲突时，高优先级的样式，就会覆盖低优先级的样式，示例如下：
  • 目录结构
    在这里插入图片描述
  • 样式冲突
    在这里插入图片描述
    在这里插入图片描述
  • Welcome 组件后引入，因此覆盖Hello组件的样式
    在这里插入图片描述
  • 如下
    在这里插入图片描述
  • 当组件越来越多的时候，我们当然不想组件之间产生干扰，看如下两种解决方案

css预处理工具（更常用）

  • 通过给样式加上区分组件的前缀，避免样式的冲突

                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  tanleiDD
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
前端开源库-babel-plugin-react-css-modules

				
			

			

				

					08-29
				

			

		

		

			
				
前端开源库-babel-plugin-react-css-modulesBabel插件响应CSS模块，使用编译时的CSS模块解析将样式名转换为类名。

			
		

	



                

              
                



	

		

			

				
					
css-modules,GitHub - gajus/react-css-modules: Seamless mapping of class names to CSS modules inside ...

				
			

			

				

					weixin_39935319的博客
				

				

					08-03
					
					166
					
				

			

		

		

			
				
React CSS ModulesReact CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global unique name. CSS Modules enable a modular and reusabl...

			
		

	



                


  
              

                


	

		

			

				
					
react-css-modules

				
			

			

				

					@黄小泽的个人博客
				

				

					12-11
					
					1323
					
				

			

		

		

			
				
在开发react项目中，有些项目需要设置大量的样式文件，如果通过定义样式常量，纯嵌入的方式编写样式，这将会大大的降低效率。stylus + react-css-modules是一套可以提高样式编写效率的方案。stylus 是一套 css 预处理框架，而react-css-modules则实现了样式的模块化。

Stylus参考实例：https://github.com/smallH/rea...

			
		

	





	

		

			

				
					
React 应用的 CSS 样式模块化

					
最新发布

				
			

			

				

					JudithHuang的博客
				

				

					02-20
					
					899
					
				

			

		

		

			
				
通过使用 CSS 样式模块化，我们可以更好地组织和管理 React 组件的样式，提高代码的可维护性和可重用性。在开发大型应用时，这种技术尤其有用，能够帮助我们更轻松地管理复杂的样式结构。

			
		

	



		

			
		



	

		

			

				
					
在React项目中使用css modules

				
			

			

				

					lblinm的博客
				

				

					09-06
					
					1468
					
				

			

		

		

			
				
在使用CSS Modules时，每个CSS类名是动态生成的，它们。这样，。：在编译过程中，CSS Modules会，并将其映射到对应的组件。这样，可以确保每个组件的类名是唯一的，。： 使用CSS Modules后，你，它们会在编译时自动处理。你只需要在组件文件中使用导入的样式对象，并将对应的类名应用到组件的元素上。： CSS Modules提供了更好的，使得。通过将CSS文件与对应的组件文件放在一起，可以更轻松地追踪和修改组件的样式。

			
		

	





	

		

			

				
					
React Native 基础学习笔记.rar

				
			

			

				

					01-28
				

			

		

		

			
				
通过使用`StyleSheet` API，可以创建可复用和模块化的样式。  最后，React Native的调试工具和热重载功能极大地提高了开发效率。开发者可以使用Chrome DevTools或专用的React Native Debugger进行源码调试，而热重载...

			
		

	





	

		

			

				
					
个人笔记(react个人笔记)

				
			

			

				

					11-03
				

			

		

		

			
				
10. **CSS-in-JS**：React社区有许多解决样式问题的方案，如styled-components、emotion等，它们允许在JSX中写CSS，提升样式管理和组件化体验。  11. **React Native**：如果扩展到移动开发，React还有React Native...

			
		

	





	

		

			

				
					
swift-ReactNative学习笔记

				
			

			

				

					08-15
				

			

		

		

			
				
4. **样式系统**: React Native使用CSS-like样式系统，但支持更直接的属性赋值，可以避免CSS的一些复杂性问题。  5. **Flexbox布局**: React Native采用Flexbox布局模型，简化跨平台的UI设计，确保元素在不同设备上...

			
		

	





	

		

			

				
					
叩丁狼前端开发笔记，html,css,js,node.js,vue,react

				
			

			

				

					03-26
				

			

		

		

			
				
 - 模块化开发：通过`require`导入模块，`module.exports`或`exports`导出模块。  5. **Vue.js**  Vue.js是一个轻量级的渐进式框架，简化了前端开发。其核心知识点：  - 模板语法：`v-bind`、`v-if`、`v-for`、`v-on...

			
		

	





	

		

			

				
					
typeScript学习笔记

				
			

			

				

					04-27
				

			

		

		

			
				
TypeScript学习笔记  TypeScript是一个自由和开源的编程语言，由微软开发。它是JavaScript的一个超集，扩展了JavaScript的语法，解决了JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化。TypeScript支持...

			
		

	





	

		

			

				
					
babel-plugin-react-css-modules：使用编译时CSS模块解析将styleName转换为className

				
			

			

				

					02-05
				

			

		

		

			
				
babel-plugin-react-css-modules
 使用编译时解析将styleName转换为className 。
 与 ， babel-plugin-react-css-modules性能开销要小得多（0-10％vs + 50％；请参见 ），并且尺寸占用空间要小得多（React小于2kb vs 17kb） -css-modules + lodash依赖性）。
 
CSS模块
很棒！ 如果您不熟悉CSS模块，则是使用模块捆绑程序（例如将范围限定为特定文档CSS加载的概念。 CSS模块加载器将在加载CSS文档时为每个CSS类生成唯一的名称（准确地说是可 ）。 要在实践中查看CSS模块

			
		

	





	

		

			

				
					
babel插件之react-css-modules

				
			

			

				

					weixin_34115824的博客
				

				

					04-01
					
					470
					
				

			

		

		

			
				
背景
在多人跨团队开发的项目中，CSS 全局污染经常是我们一个非常头疼的问题，通常我们会有以下两种做法：

一种是依靠人为约定的形式，通过给 class 携带命名空间，来避免 class 冲突，当然我们也可以写插件来检测命名是否符合规范。
另一种就是越来越被大家接受的 CSS Modules，其局部作用域和模块依赖的概念确实一定程度上解决了我们这个头疼的问题。

然而，CSS Modules 在解...

			
		

	





	

		

			

				
					
 [译] react-css-modules

				
			

			

				

					weixin_34186950的博客
				

				

					03-03
					
					118
					
				

			

		

		

			
				
原文地址：react-css-modules阅读本文前建议了解 CSS Modules 的知识。墙裂推荐阅读 Cam 的文章 CSS Modules详解及React中实践
React CSS Modules 实现了自动化映射 CSS modules。每个 CSS 类都被赋予了一个带有全局唯一名字的本地标识符。 CSS Modules 实现...

			
		

	





	

		

			

				
					
react-css-modules详解

				
			

			

				

					 飞翔的熊blabla
				

				

					07-28
					
					6303
					
				

			

		

		

			
				
CSS Modules

在React中写样式有多种方式，比较常见的有CSS modules,这种方法将css样式和组件放在一起，然后组件中直接应用，目录结构：


|—src
| |_components
|   |_ButtonComponent
|      |_Button.jsx
|     |_button.sass 


具体示例：css mudules in react

可以...

			
		

	





	

		

			

				
					
前端框架之React-----CSS Module

				
			

			

				

					ProswpuAlan的博客
				

				

					05-25
					
					547
					
				

			

		

		

			
				
在react开发中会遇到一系列css的相关问题：1.全局污染：css使用全局选择器的机制来设置样式，样式可能被错误覆盖2.命名混乱：为了避免全局污染，为了避免样式冲突，容易使命名混乱3.依赖管理不彻底：组件应该相互独立，引入一个组件应该只引入它所需要的css4.无法共享变量：复杂组件要使用JavaScript和css共同来处理样式，就会造成有些变量冗余，而预编译语言不能提供跨JavaScript和...

			
		

	





	

		

			

				
					
学习记录——react的css模块化

				
			

			

				

					sakura_zr的博客
				

				

					12-11
					
					226
					
				

			

		

		

			
				
css模块化
css模块化，意味着每一个组件里面的样式都是独立的，互相不会影响的。
比如在index里设置一个样式，在son再设置一个样式，它们的class类名都是一样的，那么直接写肯定是会相互影响的，就需要css模块化。

然后到index.js里：随便给哪个元素加个className

到index.css里随便写个样式：
.active{
    background-color: skyblue;
 }

然后到Son.css里：写一个一样类名的样式
.active{
    background-

			
		

	





	

		

			

				
					
React 中配置 CSS modules

				
			

			

				

					m0_59212993的博客
				

				

					01-20
					
					1823
					
				

			

		

		

			
				
使用Create React APP创建项目
npx create-react-app my-app
cd my-app
npm start

将React打包的配置文件释放出来
npm run eject

执行完上面的命令之后，会新增两个目录script/和config/。

在config/目录下可以看到两个配置文件webpack.config.js和webpackDevServer.config.js。如果你需要配置所需的功能，可以在webpack.config.js中添加配置。如果你需要将项目打包

			
		

	





	

		

			

				
					
react项目中的css模块化

				
			

			

				

					shi_xingwen的博客
				

				

					03-22
					
					2278
					
				

			

		

		

			
				
1. 创建xx.module.css 

.box{

width:100px;

height:100px;

border:1px solid #ccc;

}

2. 组件中写法


import style from './xx.module.css'
<div className={style.box}>



			
		

	





	

		

			

				
					
react笔记之css-Module模块化

				
			

			

				

					geyaoisnice的博客
				

				

					12-23
					
					95
					
				

			

		

		

			
				
前端学习

			
		

	





	

		

			

				
					
react中css样式模块化

				
			

			

				

					07-25
				

			

		

		

			
				
在React中，可以使用CSS样式模块化来确保样式的封装和复用。一种常见的做法是使用CSS Modules。下面是一个简单的示例：

1. 安装依赖：
   ```bash
   npm install --save-dev css-loader style-loader
   ```

2. 创建一个CSS文件，例如 `styles.module.css`：
   ```css
   .container {
     background-color: #f1f1f1;
     padding: 20px;
   }

   .title {
     font-size: 24px;
     color: #333;
   }
   ```

3. 在React组件中引入样式文件并使用：
   ```jsx
   import React from 'react';
   import styles from './styles.module.css';

   const MyComponent = () => {
     return (
       <div className={styles.container}>
         <h1 className={styles.title}>Hello React</h1>
       </div>
     );
   };

   export default MyComponent;
   ```

在上面的示例中，`styles` 对象是通过 CSS Modules 自动生成的。你可以在组件中通过 `styles.className` 的方式来引用对应的样式类名，确保样式的模块化。这样做可以避免全局污染和样式冲突的问题。

当构建项目时，Webpack会自动将CSS Modules转换为唯一的类名，并将其应用到相应的元素上。这样，你就可以在React组件中方便地使用模块化的CSS样式了。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
tanleiDD

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值