React团队开发-样式冲突

Css module

• 在React多人开发中 css中的类肯定会发生冲突
  • 如果每个页面的样式文件加上.module（文件名.module.scss）那么就会避免冲突（原理是将模块的类和id后面会随机生成一些字符串 防止避免冲突）
  • 我们如何获取到那个随机的类呢
    • 例如A页面 目录结构 a -> a.module.scss 在组件导入该样式后，会返回一个对象，这个对象关于对模块中的class类名处理后的类名

举个栗子

// A页面中的样式文件
.center { // 如果该文件是A.module.scss该类会被进一步处理 处理后会在类后面拼接一些字符串保证唯一 避免样式冲突
  color: red;
}
// ！如果想类名设为全局 我们就不能对类名进行处理 我们需要再类名外面包裹一层:global 
:global(.类名)

// 在A页面中如何拿到被处理的类呢?
import style from '../center.module.scss' // style对象可以获取到对类名处理后的类名
// 例如我们想拿到center类中处理后的类名，我们可以通过 style 这个对象 .center即可拿到处理后的类名
const A = ()=> {
  return (
  	<div className={style.center}></div>
  )
}