如何在组件中改掉公共样式的这个属性

如何在vue组件中改掉公共样式html标签下的这个属性，或者重写，但是不影响公共样式文件，

img

在子组件中的style部分，重写样式试过吗

我看是改html和body的，如果是单页页面，全局也就一个html和body。这不是自相矛盾了。
如果是多个页面， 那自然隔离开了，没啥影响
如果不是这html和body的改变，那可以用scope 隔离开

在 Vue 中，可以使用局部类名来重写公共样式，而不影响公共样式文件。具体实现方法是在组件的样式中使用局部类名，并在组件的 template 中引用这个局部类名。

例如，在组件的样式中定义一个局部类名，如：

.local-class {
  color: red;
}

然后在组件的 template 中使用这个籀部类名，如：

<template>
  <div class="global-class local-class">
    <!-- content -->
  </div>
</template>

这样，这个组件就可以使用公共样式的 global-class 类名，同时又能使用自己定义的 local-class 类名来重写样式，而不会影响其他组件使用的公共样式。

另外,也可以使用 scoped 属性来限定组件的样式只在当前组件中生效

<style scoped>
.local-class {
  color: red;
}
</style>

这样在当前组件中所有的样式都是 scoped 的，不会影响其他组件。

谢邀！！！望采纳！！

只要加上 <style scoped> 这样 css 就只会作用在当前组件内了，详细文档见 vue-loader：https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

<style>
/* global styles */
</style>

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

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

img

在该组件中肯定会影响到公共的样式，但是在别的组件中就不会影响，不知道你想做什么

改成这样试试看,去掉scope字段

<style>
overflow: visible !important;
</style>

你把mian.scss的注释去掉，子组件的style 加上scoped，试试看

style样式正常有 层级顺序，公共先调用，组件最好在公共调用之后单独写，这样组件的样式不会继承公共
直接在组件下面需要样式的标签上写一段style

overflow: visible !important;

看了一下，大家给的解答都很多，但是我觉得都不管用，原因是：

style加scoped时，不能使用deep去修改html标签的样式，这是铁的事实

style不加scoped，直接修改html，嗯，样式生效了，但是你再点开其他页面就会发现，已经被污染了，全局样式都直接被修改了

页面上也无法直接修改html标签的样式，故此，我想了一个不一样的答案，仅供参考，如果您认为可行，不要忘了点采纳我哦

1.首先在main.scss中在html里加上这个代码

html {
  --overflow: hidden;
  overflow: var(--overflow);
  你的其他样式写这里....
}

2.然后在你想单独修改样式的页面的created生命周期中(由于是html根标签，无需等待挂载dom完毕，直接上)，加入以下代码：

const html = document.querySelector('html')
html && html.style.setProperty('--overflow', 'visible')

3.最后一步很关键，将--overflow变量赋值回默认值，要使用mixins，vue3没有mixins，可以自己新建一个setup文件，挨个引入也是一样的

// mixins里面同样在created生命周期中设置，将变量赋值回来
created() {
    const html = document.querySelector('html')
    html && html.style.setProperty('--overflow', 'hidden')
 }

因为vue会先执行mixins里的生命周期再执行页面的，使用利用这个特性，完美修改。就是前期要是没有使用mixins，会觉得比较麻烦。

望采纳！！！点击回答右侧采纳即可！！
可以使用以下几种方法，我给你列举一下
使用 style 标签和 scoped 属性，可以给当前组件的样式添加局部作用域。这样可以避免影响其它组件的样式。

<template>
  <div>
    <p>Hello World</p>
  </div>
</template>

<style scoped>
p {
  color: red;
}
</style>

使用 CSS 中的类优先级，将组件中的样式添加到公共样式后面。

<template>
  <div class="my-component">
    <p>Hello World</p>
  </div>
</template>

<style>
.my-component p {
  color: red;
}
</style>

使用 !important 属性，强制覆盖公共样式。

<template>
  <div>
    <p>Hello World</p>
  </div>
</template>

<style>
p {
  color: red !important;
}
</style>