Vue：使用 scoped 时 CSS 不适用于 D3 的 svg

Posted 2023-02-22

【中文标题】Vue：使用 scoped 时 CSS 不适用于 D3 的 svg

【英文标题】：Vue: CSS does not apply to D3's svg when using scoped

【发布时间】：2019-11-14 18:25:22

【问题描述】：

这是我的组件的代码：

<template>
  <div id="something" class="card">
  </div>
</template>

const height = 200;
const width = 200;

let graph = d3
  .select('#something')
  .append('svg')
    .attr('class', 'chart-container')
    .attr('height', height)
    .attr('width', width);

<style lang="scss" scoped>
.chart-container 
  background-color: aquamarine;

</style>

svg 确实应用了 .chart-container 类，但没有应用样式

但是，当我从 <style lang="scss"> 中删除 scoped 时，它可以工作。

为什么会这样？

【参考方案1】：

我在 svg 样式上工作得很少，但我知道您不能直接更改附加元素的样式。你需要深度选择器来应用它

这是链接 - https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

看看我创建的这个沙盒，它显示了发生了什么

看看components/helloWorld.vue

https://codesandbox.io/s/vue-template-qd1d4?fontsize=14