Vue 3 Chapter 26: Style (scoped, depth selector, global selector, css modules, custom injection name, v-bind in css)

1 Introduction

In Vue, we can use scopedthe attribute to add scope to a component's styles. <style>By adding scopedan attribute to a component's tag, we can ensure that a component's styles are only applied in that component's template, without affecting other components or global styles.

2. Basic use

<template>
  <div class="example">
    <h1>Scoped Styles</h1>
  </div>
</template>

<style scoped>
.example {
      
      
  color: red;
}
</style>

In the example above, .examplethe class's styles will only be applied in the component's template and will not affect other components or global styles.

3. scoped principle

• Add a string of random hash values ​​beginning with data-v- to the current element and child elements
  
• Select this hash through the attribute selector in css, thus ensuring uniqueness and avoiding style pollution
  

4. Depth Selector

• :bind()

In the development process of Vue, we always use various component libraries, such as: ElmentUI/andt design, etc., or our own packaged components. The component styles provided by these component libraries sometimes do not meet the actual needs. At this time, we will Need to use depth selector to modify style.

The following is an example of using a deep selector :

At this time, we modify the style of the btn component in our own component, and find that it has no effect :

Vue provides the :deep() selector:

<template>
  <div class="example">
    <btn>Scoped Styles</btn>
  </div>
</template>

<style lang="scss" scoped>
.example {
      
      
  :deep(.content) {
      
      
    color: red;
  }
}
</style>

Of course, in sass, we can also use ::v-deep (use /deep/ in less) to modify the style, which is also achievable.

5. Slot Selector

• :slotted()

By default, scoped styles do not affect <slot/>rendered content, as they are assumed to be held and passed in by the parent component. Use :slottedthe pseudo- class to explicitly target the slot content as a selector:

the rendering would look like this:

• code show as below:

<template>
  <div class="example">
    <button class="content">
      <slot></slot>
      <slot name="title"></slot>
    </button>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
/* 直接修改插槽元素的样式，不生效 */
.example {
      
      
   .unname-class {
      
      
     color: red;
   }
}

/* 使用:slotted()插槽选择器可以修改插槽内元素的样式 */
.example {
      
      
  :slotted(.unname-class) {
      
      
    color: red;
  }
  :slotted(.name-class) {
      
      
    color: orange;
  }
}
</style>

</style>

6. Global Selector

• :global()

In actual development, we may encapsulate more public style files, but we want to modify a certain public style in a certain component. At this time, it is recommended to use a selector instead of creating another <style></style>label :global():

<style scoped lang="scss">
:global(.global-color) {
      
      
  color: red;
}
</style>

Before modification, the text color is orange, and after modification, the text color has changed, the effect is as follows:

7. Mix local and global styles

• You can use scoped and unscoped in the same .vue file

<style>
// ......
</style>

<style scoped lang="scss">
// ......
</style>

8. CSS Modules

• In scopedaddition, we can also use modulethe privatization of implementation styles
• scopedBy generating a string of data-v at the beginning, random custom attributes, the style is private through the attribute selector
• moduleBy generating a random class name, the style is private
• moduleExpose the generated CSS class as $stylean object to the component

First look at the effect:

sample code:

<template>
  <div class="example">
    <header :class="$style.header">头部</header>
    <main :class="$style.main">内容</main>
    <footer :class="$style.footer">底部</footer>
  </div>
</template>

<style module lang="scss">
.header,
.main,
.footer {
      
      
  height: 100px;
  width: 500px;
  border: 1px solid #000;
  font-size: 18px;
  font-weight: bold;
}
.header {
      
      
  margin-bottom: 20px;
  color: palevioletred;
}
.main {
      
      
  margin-bottom: 20px;
  color: green;
}
.footer {
      
      
  color: blue;
}
</style>

9. Custom injection name

• moduleIn addition to the above usage, the function of custom name is also provided
• The effect $styleis the same as

<template>
  <div class="example">
    <header :class="myStyle.header">头部</header>
    <main :class="myStyle.main">内容</main>
    <footer :class="myStyle.footer">底部</footer>
  </div>
</template>

<style module="myStyle" lang="scss">
.header,
.main,
.footer {
      
      
  height: 100px;
  width: 500px;
  border: 1px solid #000;
  font-size: 18px;
  font-weight: bold;
}
.header {
      
      
  margin-bottom: 20px;
  color: palevioletred;
}
.main {
      
      
  margin-bottom: 20px;
  color: green;
}
.footer {
      
      
  color: blue;
}
</style>

10. v-bind() in CSS

• Single-file component <style>tags support using v-bind CSS functions to link CSS values ​​to dynamic component state
• Simply put, variables in js can be dynamically bound through functions in cssv-bind()
• The actual value is compiled into a hashed CSS custom property and updated reactively when the source value changes .

Rendering effect:

Code example:

<template>
  <div class="example">
    <div class="example-text">css中v-bind绑定变量</div>
  </div>
</template>

<script setup lang="ts">
import {
      
       ref } from "vue";
const color = ref("red");
</script>

<style scoped lang="scss">
.example-text {
      
      
  color: v-bind(color);
}
</style>