0

After much looking around, i had to ask this question. I have been using css modules in my react application. I decided to have a d3 component. However, after much research, I am still not able to find a way to load css classes to my d3 application. Following is my directory container:

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

My css modules styles.css looks like this:

.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 has all the logic to render the d3 chart. It mostly resembles the example here: https://codepen.io/brendandougan/pen/PpEzRp

I am not sure how can I proceed. Worst case, I think i might just import the css on top of my index.js file. However, that seems a dumb way to me.

Can anyway help me if they have found a solution to this problem?

Omkar
  • 2,274
  • 6
  • 21
  • 34

1 Answers1

0

You could do something like this for d3.

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

Alternatively you can load the css-module like this also but possibility is when refresh of d3 happens styles need to be re-loaded. (this depend on how d3 is loaded into react, for reference )

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