Применение классов к диаграмме d3 в приложении реагирования с использованием модулей css - PullRequest
Новая
       11

Применение классов к диаграмме d3 в приложении реагирования с использованием модулей css

0 голосов
/ 27 апреля 2018

После долгих осмотров мне пришлось задать этот вопрос. Я использую модули CSS в моем приложении реакции. Я решил иметь компонент d3. Однако после долгих исследований я все еще не могу найти способ загрузки классов CSS в мое приложение d3. Ниже приведен мой контейнер каталога: 

app/containers/Chart
├── ChartContainer.js
├── flare.js
└── styles.css

Мои css модули styles.css выглядят так: 

.reset{
    border: none;
    background: transparent;
    color: #d0021b;
    display: block;
    width: 100%;
    text-align: center;
}

.reset:hover {
    cursor: pointer;
}

.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1px;
}

.node text {
    font: 14px sans-serif;
}

.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1px;
}

ChartContainer.js имеет всю логику для отображения диаграммы d3. Это в основном напоминает пример здесь: https://codepen.io/brendandougan/pen/PpEzRp

Я не уверен, как мне поступить. В худшем случае, я думаю, я мог бы просто импортировать CSS поверх моего файла index.js. Тем не менее, мне кажется, что это глупый путь.

Может ли мне помочь, если они нашли решение этой проблемы?

1 Ответ

0 голосов
/ 02 мая 2018

Вы можете сделать что-то подобное для d3. 

import '!style-loader!css-loader!./styles.css';

В качестве альтернативы вы также можете загрузить модуль css, как это, но возможно, когда происходит обновление d3, стили должны быть повторно загружены. (это зависит от того, как d3 загружается в реакцию, для ссылка ) 

import sty from './styles.css'    
//inside render
<svg className={[sty.reset,sty.node].join(' ')}>
</svg>
...