[分享]css只在当前组件起作用

在前端开发中，我们经常使用CSS来美化页面。但在越来越复杂的前端组件中，CSS可能会产生一些混乱。比如，在一个组件中使用了相同的CSS类名，导致这个类对于其他组件也起作用了。那么，如何让CSS只在当前...

在前端开发中，我们经常使用CSS来美化页面。但在越来越复杂的前端组件中，CSS可能会产生一些混乱。比如，在一个组件中使用了相同的CSS类名，导致这个类对于其他组件也起作用了。那么，如何让CSS只在当前组件起作用呢？

答案是使用CSS模块化。CSS模块化是一种让CSS只在当前模块中起作用的方法。这种方法将CSS文件拆分成多个模块，并在每个组件中引入自己的CSS模块。这样，当其他组件引入相同的CSS模块时，这些CSS规则只会被本组件使用。

// 定义一个CSS模块
.my-component {
  width: 100px;
  height: 100px;
  background-color: red;
} 

在组件中引入这个模块：

import styles from './my-component.module.css';
const MyComponent = () => {
  return (
    <div className={styles['my-component']}>
      我是组件
    </div>
  );
}; 

这里我们使用了CSS模块化的语法，在组件中使用了styles对象来访问my-component类。在组件渲染时，会自动应用该类中定义的CSS样式。另外，使用了CSS模块化语法之后，CSS类名会自动转换为独一无二的类名，解决了类名冲突的问题。

CSS模块化也支持使用类似SASS、LESS等预处理器，同时也便于管理和维护CSS代码。因此，无论是在个人项目还是在团队协作中，使用CSS模块化都是一个值得推荐的方法。