我试图在Histoire中创建一个主题切换器，它允许我在两个不同的主题中显示一个组件。
为此，我有两个导入不同scss文件（主题文件）的 Package 器组件。 Package 器的目的是 Package 一个组件并将该主题文件应用于它 Package 的组件。
foo.scss
.my-table {
background-color: blue;
}字符串
bar.scss
.my-table {
background-color: red;
}型
对于这两个样式表，我有一个 Package 器，可以像这样导入它们：
WrapperComponent.vue
<template>
<div id="fooThemeWrapper">
<slot></slot>
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
@use '../scss/themes/foo';
</style>型
Package 器组件应用于Histoire变体，如下所示
const fooThemeSetup = defineSetupVue3(({ addWrapper }) => {
addWrapper(fooThemeWrapper);
});型
我面临的问题是scss文件中的规则没有应用到插槽内容。
我试着让style标签没有作用域。这将两个scss文件的样式应用到slot内容，但这导致一个scss文件与另一个scss文件重叠。我希望 Package 器组件导入的样式只应用到 Package 器组件slot内容。
有没有一种方法可以将组件作用域标识符（添加到所有作用域组件元素的属性）也应用到组件插槽内容？
1条答案
按热度按时间rggaifut1#
我面临的问题是scss文件中的规则没有应用到插槽内容。
这是因为：
使用
scoped，父组件的样式不会泄漏到子组件中。但是，子组件的根节点将受到父组件的作用域CSS和子组件的作用域CSS的影响。这是通过设计，以便父组件可以为布局目的设计子根元素的样式。-https://vuejs.org/api/sfc-css-features.html#scoped-css下一页：
我试着让样式标签不限定作用域，这将两个scss文件的样式应用到插槽内容，但这导致一个scss文件覆盖另一个。
全局样式将被捆绑，所以即使你的组件是有条件渲染的，它也只是在渲染中是有条件的，而不是捆绑的。最终，它将被打包到一个css文件中。
因为它们都是相同的选择器，所以它们将级联。
要构建主题系统，您可以像这样修改：
1.将每个主题 Package 到数据选择器中。例如：
字符串
data属性的条件值假设您可以访问
body标记型
备注：
<body>标签只是一个例子，它们可以是<html>标签和容器标签（只要它是使用my-table类的任何标签的父标签）。