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

Question

这是我的组件的代码：

<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，但没有应用样式

但是，当我scoped从 中删除时<style lang="scss">，它就起作用了。

为什么它会这样？

Answer 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