Question

经过多看，我不得不问这个问题。我一直在我的反应应用程序中使用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。然而，这对我来说似乎是一种愚蠢的方式。

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

Answer 1

你可以为d3做这样的事。

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

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

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

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

1 个答案: