如何在React应用中为D3图表应用CSS Modules类？

Great question! The issue here is that CSS Modules automatically scopes your class names to avoid conflicts—so the .reset class in your styles.css gets transformed into a unique name like reset_xyz123 in the compiled CSS. When you try to reference 'reset' directly in D3, it doesn’t match the scoped class name, hence the styles don’t apply.

Here are two solid solutions to fix this:

1. Use the scoped class names from the imported CSS module #

This is the most idiomatic approach with CSS Modules. Import your styles file into your component, then use the exported class names directly in your D3 code.

First, import the styles in ChartContainer.js:

import styles from './styles.css';

Then, when applying classes with D3, use the scoped names instead of the original class strings:

Setting a single class #

// Replace this:
// d3.select('#my-element').classed('reset', true);

// With this:
d3.select('#my-element').classed(styles.reset, true);

// Or if you want to overwrite existing classes:
d3.select('#my-element').attr('class', styles.reset);

Applying multiple scoped classes #

If you need to add multiple classes, you can either concatenate them:

d3.select('#my-element')
  .attr('class', `${styles.reset} ${styles.chartTitle}`);

Or use an object with classed():

d3.select('#my-element')
  .classed({
    [styles.reset]: true,
    [styles.chartTitle]: true
  });

2. Make the class global (if you need it accessible outside the module) #

If you want the .reset class to be available globally (not just in this component), you can mark it as global in your CSS Modules file using the :global() pseudo-class:

In styles.css:

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

Now you can reference 'reset' directly in your D3 code as you normally would:

d3.select('#my-element').classed('reset', true);

This is useful if you’re reusing the same class across multiple components or with vanilla JS/D3 code outside your React components.

A quick note: When using scoped classes, make sure you’re not mixing original class names with scoped ones accidentally—always refer to the styles object for classes defined in your CSS Modules file.

内容的提问来源于stack exchange，提问作者Omkar