Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

Vue· Modify third-party component styles

1. Overview of scoped properties

In a Vue component, adding a scoped attribute to the style tag indicates that the style in the style tag applies only to the Vue component.

2. The style changes of components that reference each other

2.1 Situation Analysis

situation The parent component Child components
Is a add add
Case 2 Don’t add Don’t add
Is three add Don’t add
Is four Don’t add add
  • Case code (app. vue and box. vue have no scoped attribute added by default)

App.vue

<template> <div id="app"> <div class="box"> Parent component </div> </box> </div> </template> <script> import box from "@/components/Box"; export default { name: 'App', components: { box } } </script> <style> .box { width: 200px; height: 200px; background: green; line-height: 200px; color: white; margin: 20px; text-align: center; } </style>Copy the code

Box.vue

<template> <div> <div class="box"> child </div> </template> <script> export default {name: "Box" } </script> <style scoped> .box { width: 100px; height: 100px; background: darkred; line-height: 100px; color: white; margin: 20px; text-align: center; } </style>Copy the code

2.2 is a

  • The effect

  • Browser DOM node

2.3 case 2

  • The effect

  • Browser DOM node

2.4 is three

  • The effect

  • Browser DOM node

2.5 is four

  • The effect

  • Browser DOM node

3. Understand the working principle of scoped attribute

If the component’s style is scoped, the DOM node rendered by the component is appended with a value representing the current component’s form, such as data-V-hash, to indicate which component the DOM node belongs to.

In addition to the DOM nodes rendered by the component being added with values of the form data-V-hash, the component’s style is also added with values of the form data-V-hash. Used to indicate which component the style is applied to.

4. Understand the characteristics of the scoped attribute

When both parent and child styles are scoped, the style of the parent does not affect the style of the child. Note, however, that the HTML root node of the child component is affected by the style of the parent component, designed so that the parent component can make layout adjustments to the child component. So we can see that the child component’s HTML root node has two data-v-hash values for the parent component and the corresponding data-V-hash value for the child component.

5. Modify the style of the subcomponent of the parent component using the depth-action selector

We can use the depth selector to make styles written in the parent component apply to the child component. We can use the >>> operator to do this. If some preprocessors like Sass cannot parse the >>> operator correctly, we can use the /deep/ or :: V-deep operators instead, both of which are aliases of >>>.

  • steps
  1. In the parent component, add a selector for the child component referenced by the parent component.
  2. In the parent component’s style, write a style that uses a format similar to the selector in the parent’s subcomponent selector >>> child.
  • case

App.vue

<template> <div> <div class="box"> Parent component element </div> <box class="subBox"></box> </div> </template> <script> import box from "@/components/Box"; export default { name: 'App', components: { box } } </script> <style scoped> .box { width: 200px; height: 200px; background: green; line-height: 200px; color: white; margin: 20px; text-align: center; } .subBox >>> .box { background: black; } </style>Copy the code

Box.vue

<template> <div> <div class="box"> child component element </div> </template> <script> export default {name: "Box" } </script> <style scoped> .box { width: 100px; height: 100px; background: darkred; line-height: 100px; color: white; margin: 20px; text-align: center; } </style>Copy the code
  • The effect

6. Properly use component styles without scoped attributes

When we want to change the style of a child component from a parent component, especially if we have a third party component as a child component, we may not be able to change the style of a child component from the parent component through the depth selector. This is usually because the child component to which the style is being modified does not exist in the parent component.

  • case

App.vue

<template>
  <div>
    <dropdown class="dropdown"></dropdown>
  </div>
</template>

<script>
import dropdown from "@/components/Dropdown";

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

<style scoped>
  .dropdown >>> .el-dropdown-menu {
    width: 200px;
  }
</style>
Copy the code

Dropdown.vue

<template> <div> <el-dropdown> <span class="el-dropdown ">< I class="el-icon-arrow-down el-icon--right"></ I > </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item> golden cake </el-dropdown-item> <el-dropdown-item> Lion heads </el-dropdown-item> <el-dropdown-item> spiral rice noodle </el-dropdown-item> <el-dropdown-item Disabled > Double milk </el-dropdown-item> <el-dropdown-item divided> Oyster omelet </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </template> <script> export default { name: "Dropdown" } </script> <style scoped> .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } </style>Copy the code
  • The effect

  • Browser DOM node

We can see from the above that we cannot change the style of the subcomponent of the parent component through the depth selector. This is because the element of the child component we want to modify does not exist in the parent component, so we cannot change the style of the child component through the depth selector in the parent component. In this case, we must use the style tag without the scoped attribute for global coverage of the style. The Vue component allows style tags with scoped attributes to exist alongside style tags without scoped attributes.

Modified app.vue

<template>
  <div>
    <dropdown class="dropdown"></dropdown>
  </div>
</template>

<script>
import dropdown from "@/components/Dropdown";

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

<style scoped>

</style>

<style>
  .el-dropdown-menu {
    width: 200px;
  }
</style>
Copy the code
  • The effect

  • Browser DOM node

7. Notes on Vue component style writing

  1. All components add the scoped attribute when styling.
  2. It is not recommended to use styles on the component root element because the HTML root node of the child component is affected by the style of the parent component.
  3. Since the element.style style is usually inline or written in JavaScript code, you can modify it by going to the! The important keyword raises the priority of the style to override.

Author: Toyo

Copyright notice: This article is an original article, shall not be reproduced without my permission.