How to set style Scoped and Global in Vue3

1. Overview

• Scoped style: A Scoped style is a style specific to a certain component and is only effective within that component. This means that if you define scoped styles in one component, they will not affect other components. This method can effectively avoid style conflicts.
• Global Style: Global Style is globally valid and can take effect anywhere. This approach is suitable for styles that need to be shared among multiple components.

2. Scoped style settings

In Vue 3, using scoped style is very simple. You just need to<style>Add to the tagscopedAttributes.

Sample code:

<template>
  <div class="container">
    <h1 class="title">Hello, Vue 3!</h1>
    <p class="description">This is a sample text，For demonstration scoped The function of style。</p>
  </div>
</template>

<script>
export default {
  name: 'ScopedExample'
}
</script>

<style scoped>
.container {
  border: 1px solid #ccc;
  padding: 20px;
}
.title {
  color: blue;
}
.description {
  color: green;
}
</style>

In the example above, we created a name calledScopedExample, and the scoped style is defined in it. No matter how styles we define in other components, these styles do not conflict with each other.

Important Note:

1. Style Naming:usescopedAfter that, Vue will automatically handle the scope of these styles. So, although you can use the same class name in multiple components, they don't affect each other.
2. The importance of local styles:Scoped styles are valuable assets in large applications, helping us better organize and manage component styles.

3. Global style settings

In some cases, you may need to create global styles, such as CSS Reset, basic font definitions, etc. In Vue 3, setting global styles is simple, usually we willOr create a global style in the project's CSS folder.

Sample code:

Normally, you canIntroduce global styles:

<template>
  <div >
    <ScopedExample />
  </div>
</template>

<script>
import ScopedExample from './components/';

export default {
  name: 'App',
  components: {
    ScopedExample
  }
}
</script>

<style>
/* Global Styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 2rem;
}
</style>

At this time, we define some global styles in , such as settingbodyDefault style and modificationh1The font size of the label. These styles will take effect on the entire application.

4. How to combine Scoped and Global styles

When our application becomes more complex, it is very useful to use a combination of scoped and global styles. Typically, we define the common style as the global style, and the component-specific style as the scoped style.

Comprehensive example:

In the following example, we create a new component that shows how to use both global styles and scoped styles.

<template>
  <div class="global-component">
    <h2 class="global-title">Global Style</h2>
    <p class="description">这是一个拥有Global Style的组件，At the same time, we have Scoped style。</p>
    <button class="button">Click me</button>
  </div>
</template>

<script>
export default {
  name: 'GlobalAndScopedExample'
}
</script>

<style scoped>
.button {
  background-color: blue;
  color: white;
  padding: 5px 10px;
  border: none;
}
</style>

<style>
.global-component {
  border: 1px solid #333;
  padding: 20px;
}

.global-title {
  color: orange;
}
</style>

In this example:

• We define a GlobalAndScopedExample component.
• Use global styles to style global-component and global-title so that they take effect throughout the application.
• Use scoped styles to define specific styles for buttons. In scoped style, our button style is local and will only work for the current component.

5. Summary

In Vue 3, effectively using scoped and global styles can enhance our application structure, avoid CSS conflicts, and make style management clearer. By mastering how they are used, we can easily build more maintenance and scalable front-end projects. In actual development, effectively combining these two styles according to the needs of components can better improve the development experience.

The above is the detailed content of Vue3's style Scoped and Global settings. For more information about Vue3's style Scoped and Global settings, please follow my other related articles!