Vue: CSS не применяется к svg D3 при использовании scoped

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, к которому применен, но к

* не применяется стиль1008 *

Однако, когда я удаляю scoped из <style lang="scss">, это работает.

Почему он так себя ведет?

Answer 1

Я действительно меньше работал над стилем svg, но я знаю, что вы не можете изменить стиль добавленных элементов напрямую. Вам нужны Deep Selectors, чтобы применить к этому

Вот ссылка - https://vue -loader.vuejs.org / guide / scoped-css.html # смешивающие локальные и глобальные стили

Взгляните на созданную мной песочницу, которая показывает, что произошло

Просто посмотрите на components/helloWorld.vue

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