In-depth explanation of the style feature in Vue3 single-file components

style scoped

Things to note:

• The style will not affect other components and will only take effect on the current component.
• The root element of a child component will be affected by both the scoped styles of the parent component and the scoped styles of the child component. The purpose of this is to allow the parent component to adjust the layout of the child component.
• There are 3 special selectors:

1. Deep selector: can affect child components. Use pseudo class => :deep(cls: affected selector)

    .a :deep(.b) {
        ...
    }

2. Slot selector: can affect the style of the slot content. Use pseudo-class => :slotted(selector)

    :slloted(.a) {
        ...
    }

3. Global selector: The style affects the global environment. Using pseudo-class => :global(selector)

    :slloted(.a) {
        ...
    }

scoped style can exist with style

style module

The style tag contains a module. Its style, like style scoped, can only be scoped to the current component.

This method compiles CSS into CSS modules and exposes them to the component $styles object to use CSS styles.

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

<style module>
.red {
  color: red;
}
</style>

You can assign values ​​to the module to customize the name of the exposed object

<template>
  <p :class="style.red">
    This should be red
  </p>
</template>

<style module='style'>
.red {
  color: red;
}
</style>

You can use the useCssModule() api to use cssModule in the combined api.

// By default, returns the class in <style module> useCssModule()

// Naming, returning the class in <style module="classes"> useCssModule('classes')

State-driven dynamic CSS

You can use v-bind() to associate CSS values ​​with dynamic component states.

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

Summarize

This is the end of this article about the style feature in vue3 single-file components. For more relevant vue3 single-file component style feature content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!