覆盖/覆盖已安装包的现有 css答案

【问题标题】：Override/Overwrite the existing css of an installed package覆盖/覆盖已安装包的现有 css
【发布时间】：2021-12-15 15:11:16
【问题描述】：

我已经为type writer 安装了一个包，但它没有覆盖我在组件中实现的 css。下面是一个例子：

<template>
  <v-row class="hero" align-content="center">
      <div class="msg">
        <typewriter
            :speed="200"
            :full-erase="true"
            :cursor="true"
            :interval="300"
            :words='["Student","Mentor", "Parent"]'>
          Join as a
        </typewriter>
  </v-row>
</template>

那么这是下面的样式：

<style lang="scss" scoped>

.msg {
  font-size: 1.9em;
  font-weight: bolder;
}
.typewriter-msg {
  color: #ff0048;
  border-bottom: 2px solid red;
  font-weight: 600;
}

</style>

包的代码，已经有css，但想覆盖它：

<template>
  <span class="typewriter">
  <slot></slot>
  <span
    class="typewriter-msg"
    :class='{"typewriter-selected":isFullErasing}'>{{ typing }}</span>
    <span class="typewriter-cursor" v-if="cursor">{{ cursorSymbol }}</span>
  </span>
</template>

所以这是我想用来覆盖包中的样式的样式，但我实现了它并且它不起作用：

.typewriter-msg

如何做到最好？

【问题讨论】：

标签： javascript css vue.js sass

【解决方案1】：

scoped 属性（即<styles scoped>）将样式限定为父组件，因此不会影响内部子元素。

您可以删除该属性，以便样式普遍适用，到达typewriter 组件的元素。

或者你可以在样式前加上 deep selector (>>>):

<style scoped>
>>> .msg {
  font-size: 1.9em;
  font-weight: bolder;
}
>>> .typewriter-msg {
  color: #ff0048;
  border-bottom: 2px solid red;
  font-weight: 600;
}
</style>

demo

【讨论】：