In-depth explanation of style features in vue3 single file component

style scoped

What needs to be noted are:

• The style will not affect other components, but will only take effect on the current component.
• The root element of a child component is affected by the scope style of the parent component and the scope style 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. Depth selector: can affect child components. Use pseudo-class => :deep(cls: selector that affects)

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

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

    :slloted(.a) {
        ...
    }

3. Global selector: It is the style that affects the global. Use pseudo-class => :global(selector)

    :slloted(.a) {
        ...
    }

scoped style can exist at the same time as style

style module

The style tag has module. Its style, like style scoped, can only scope the current component.

This way will compile css into css modules. It will be exposed to the component $styles object to use css style

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

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

You can assign a value to the module to customize the exposed object name

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

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

In a combined api, you can use the useCssModule() api to use cssModule.

// Default, return the class in <style module>useCssModule()

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

State-driven dynamic css

You can use v-bind() to associate css values ​​to 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 article about the style feature in vue3 single file component. For more related content on vue3 single file component style feature, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!