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

然而，当我从<style lang="scss">中移除scoped时，它可以正常工作。

为什么它会表现出那种方式？

- MongoLato

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

- Satyam Pathak