What are the new features in Vue3 style and how to use them

New style features

The Vue3.2 version has made many upgrades to the style of single-file components, such as local styles, css variables and Styles are exposed for template use, etc. (Learning video sharing: vue video tutorial)

1. Partial style

When<style></style> tag has scoped attribute, its CSS will only be applied to the elements of the current component:

<template>
  <div class="example">hi</div>
</template>
 
<style scoped>
.example {
  color: red;
}
</style>

2. The depth selector

is in scoped If the selector in the style wants to make a more "deep" selection, that is, affect sub-components, you can use :deep() this pseudo-class:

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

DOM content created with v-html will not be affected by scoped styles, but you can still style it using depth selectors.

3. Slot selector

By default, the scope style will not affect <slot></slot> Rendered content because they are considered to be held and passed in by the parent component. Use the :slotted pseudo-class to exactly target the slot content as the selector:

<style scoped>
:slotted(div) {
  color: red;
}
</style>

4. Global selector

If you want To apply one of the style rules globally, instead of creating another <style></style>, you can use the :global pseudo-class:

<style scoped>
:global(.red) {
  color: red;
}
</style>

5. Mix local and global styles

You can also include both scoped and non-scoped styles in the same component:

<style>
/* global styles */
</style>
 
<style scoped>
/* local styles */
</style>

6. Support CSS Modules

<style module></style> tags will be compiled into CSS Modules and the generated CSS class keys will be exposed to the components:

1. The default is $style The object is exposed to the component;

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>
 
<style module>
.red {
  color: red;
}
</style>

2. You can customize the injected module name

<template>
  <p :class="classes.red">red</p>
</template>
 
<style module="classes">
.red {
  color: red;
}
</style>

7. Use it with setup

The injected class can be used in setup() and <script setup></script> through useCssModule API:

<script setup>
import { useCssModule } from &#39;vue&#39;
 
// 默认, 返回 <style module> 中的类
const defaultStyle = useCssModule()
 
// 命名, 返回 <style module="classes"> 中的类
const classesStyle = useCssModule(&#39;classes&#39;)
</script>

8. Dynamic CSS

The <style></style> tag of a single-file component can associate CSS values ​​​​to dynamic component state through the v-bind CSS function:

<script setup>
const theme = {
  color: &#39;red&#39;
}
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  color: v-bind(&#39;theme.color&#39;);
}
</style>

The above is the detailed content of What are the new features in Vue3 style and how to use them. For more information, please follow other related articles on the PHP Chinese website!