style scoped

Note the following:

  • Styles do not affect other components and only apply to the current component.
  • The root element of the child component doesAt the same time Affected by the scoped style of the parent component and the scoped style of the child component.This is done so that the parent component can adjust the layout of the child component.

  • There are three special selectors:

1. Depth selector: Can affect child components. Using pseudo-classes => :deep(CLS: affected selector)

    .a :deep(.b){... }Copy the code

2. Slot selector: Can influence the style of slot content. Use pseudo classes => : Slotted (selector)

    :slloted(.a){... }Copy the code

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

    :global(.a){... }Copy the code
  • Scoped Style can coexist with style

style module

The style tag contains the Module. The style, like style scoped, is only scoped to the current component. This method compiles CSS to CSS modules and exposes 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>
Copy the code

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

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

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

CssModule can be used with the useCssModule() API in the composite API.

// By default, classes in 
useCssModule()


useCssModule('classes')
Copy the code

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>
Copy the code