如何为某些组件全局添加样式

Posted 2023-02-22

【中文标题】如何为某些组件全局添加样式

【英文标题】：How to globally add styles to some components

【发布时间】：2022-01-07 16:42:59

【问题描述】：

我想为某些组件添加一些样式，例如 v-chip 我想在全局范围内添加一些填充。我不想这样做，也不想在每个使用 v-chip 的组件上导入样式文件。我尝试将样式添加到 variables.scss 它工作正常但违反了产生重复 css 的警告https://vuetifyjs.com/en/features/sass-variables/#caveats。创建了一个 overwrites.scss 文件并添加到它也不起作用。请问有人知道怎么实现吗？

【参考方案1】：

根据caveats，当您将任何其他样式表导入 variables.scss 时，会发生 CSS 重复。据我了解，当您没有导入任何 CSS 文件时，不会发生任何重复。所以，在 variables.scss 中配置变量是配置全局样式的好方法。

如果您需要配置没有适用变量的样式（或者您只是更喜欢这种样式配置方式），您可以：

一个。创建您自己的组件（例如 XChip.vue）作为 v-chip 的包装器。

<!-- XChip.vue -->
<template>
  <v-chip v-bind="$attrs" v-on="$listeners">
    ...
  </v-chip>
</template>

b.在该组件中添加必要的样式

<style scoped>
  ...
</styles>

c。然后在您需要芯片时在项目中的任何地方使用它。

你可以在这里找到更多关于如何传递槽的信息：Vue - how to pass down slots inside wrapper component?