UI框架与Scoped

在使用组件库的时候通常在 Scoped 里面写的样式无效，这是因为 作用域样式（Scoped CSS） 的机制导致的。

在组件中使用 <style scoped> 时，Vue 会为该组件生成作用域唯一的属性选择器，以确保样式只作用于当前组件内的元素，这是通过在生成的 HTML 元素上添加一个类似 data-v-xxxx 的属性来实现的。

例如源代码如下

<div class="my-component">
    <!-- 组件内容 -->
</div>

.status-offer {
    background-color: #e0f7e9 !important;
}

实际上编译成了

<div class="my-component" data-v-12345678>
    <!-- 组件内容 -->
</div>

```css .status-offer[data-v-12345678] { background-color: #e0f7e9 !important; }

而在使用第三方组件（如 Element Plus）时，这些组件内部生成的 DOM 结构并不包含这个作用域属性。因此，定义在 <style scoped> 中的样式无法作用于这些内部元素，导致样式不生效。

解决方法如下

方法 1 使用全局样式

方法 2 使用深度选择器

:deep(.status-offer) {
    background-color: #e0f7e9 !important;
}