使用 css 模块在反应应用程序中将类应用于 d3 图表答案

【问题标题】：Applying classes to d3 chart in react application using css modules使用 css 模块在反应应用程序中将类应用于 d3 图表
【发布时间】：2018-10-07 16:58:56
【问题描述】：

环顾四周后，我不得不问这个问题。我一直在我的反应应用程序中使用 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

我不确定我该如何继续。最坏的情况，我想我可能只是在我的index.js 文件上导入 css。但是，这对我来说似乎很愚蠢。

如果他们找到了解决这个问题的方法，可以帮助我吗？

【问题讨论】：

标签： javascript reactjs d3.js css-modules

【解决方案1】：

你可以为 d3 做这样的事情。

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

或者，您也可以像这样加载 css 模块，但可能是当 d3 发生刷新时需要重新加载样式。（这取决于 d3 如何加载到 react 中，对于 reference）

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

【讨论】：