ToB企服应用市场:ToB评测及商务社交产业平台

标题: css样式隔离的几种常用方式 [打印本页]
作者: 铁佛    时间: 2024-10-23 19:13
标题: css样式隔离的几种常用方式
1. 自定义样式类命名规范手动隔离，好比可以直接使用 BEM 规范；
BEM是一种 css 命名方法论，样式类命名为块（Block）、元素（Element）、修饰符（Modifier）的简写。统一的样式类命名方法让 css 便于统一团队开辟规范，方便维护。
样式类以 .block__element--modifier 的形式命名，即模块名 + 元素名 + 修饰名
如 .tab-container__item--active，代表 tab 页组件中激活的 tab 页。
2.vue中可以直接使用<style scoped>  隔离样式
注意：在带有 scoped 的时候，父组件的样式将不会泄漏到子组件当中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这是有意为之的，如许父组件就可以设置子组件根节点的样式，以到达调整结构的目标。
本质上是使用的css属性选择器来实现样式隔离的，在编译阶段自动附加上组件id
  1. <style>
  2.   .example[data-v-f3f3eg9] {  color: red;  }
  3. </style>
  4. <template>
  5.   <div class="example" data-v-f3f3eg9>hi</div>
  6. </template>
复制代码
3.使用css module（主要用于Vue(render函数中jsx/tsx)、React中）隔离样式
css module 不是官方尺度，也不是欣赏器的特性，而是在构建步骤（如使用 webpack）中对 css 类名和选择器限定作用域（类似于命名空间）的一种方式。现在 webpack 已经默认开启 css module 功能。
在webpack的项目中是css-loader提供的能力({ loader: 'css-loader', options: { modules: true/*开启css模块*/} })。在vite中已经适配了vue3单文件组件。
在CSS Module中可以使用:local(className)来声明一个局部作用域的CSS规则举行样式隔离, 使用:global(className)来声明一个全局作用域的规则，不会举行隔离。
:local(.qd_btn) { color: #fff;} //默认为 local，样式隔离
:global(.qd_text) { color: chocolate; }  //global不会举行隔离
我们在开辟过程一样寻常不必要手动加:local()}。postcss-modules-local-by-default插件已经默认帮我们处理了这一步，只要我们开启了CSS模块化，里面的CSS在编译过程会默认加上:local()
css module样式隔离的原理是：css modules 在打包时会将天生的class哈希化，即给该module里面的class通过肯定的设置规则天生一个不重复的名字，从而实现样式隔离。:global全局作用域的class不会举行哈希化。
.qd_btn { color: #fff; }
编译后： .input_css_UjDVoF__qd_btn { color: #fff; }
2-1.React中使用css Module 隔离样式
默认已设置webpack开启css Module({ loader: 'css-loader', options: { modules: true/*开启css模块*/} })
  1. .title { color: blue; }
  2. :global {/* 定义全局样式 */
  3.   .global-style { color: red;
  4.   }
  5. }
  6. import React from 'react';
  7. import styles from './styles.css'; // 导入CSS模块样式
  8. function MyComponent() {
  9.   return (
  10.     <div>
  11.       <h1 className={styles.title}>Hello, CSS Modules!</h1>
  12.       <p className={styles['global-style']}>This is a global style.</p>
  13.     </div>
  14.   );
  15. }
复制代码
2-2.vue中<style module> 隔离样式
(1).一个 <style module> 标签会被编译为 CSS Modules 并且将天生的 CSS class 作为 $style 对象暴露给组件。 然后在:class中通过$style.xxx使用class
  1. <template>
  2.         <div>
  3.                 <p :class="$style.red">我是内容</p>
  4.         </div>
  5. </template>
  6. <style lang="scss" module>
  7.         .red {        color: red;        }
  8. </style>
复制代码
(2).我们还可以给style module属性自定义一个名字。
  1. <p :class="classes.red">我是内容</p>
  2. //  给classes自定义一个classes的名字
  3. <style lang="scss" module="classes">
  4.         .red {        color: red;        }
  5. </style>
复制代码
(3).对于render函数中的JSX/TSX组件，由于其没办法用 scoped style，以是一样寻常会使用 CSS Modules 。
注入的类可以通过 useCssModule API 在vue3 setup() 中使用。
useCssModule() // 默认, 返回 <style module> 中的类
useCssModule('classes')// 命名, 返回 <style module="classes"> 中的类

  1. <script lang="tsx">
  2. import { defineComponent, useCssModule } from 'vue';
  3. export default defineComponent({
  4.   setup(){
  5.                 const classes = useCssModule('classes');
  6.     return () => ( <>  <div class={ classes.text }>我是内容</div>  </> );
  7.   }
  8. })
  9. </script>
  10. <style lang="scss" module="classes">
  11.         .text {        color: red;        }
  12. </style>
复制代码
4.React中还可以使用css in js 隔离样式：
vue自带的css办理方案已经很好了，不必要再引入别的方案。而且就算选择jsx的写法，一样寻常也是因为惯性选择css modules。
css in js主要还是在react中应用的比较多（由于国内用的不多，就不多介绍了，知道有这么个东西即可）。
常用的css in jS实现库是emotion、yarn add @emotion/react

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4