Best way to override styling found in module a based on module b.

[svenvandescheur]

I have a project in which uses CSS modules to isolate and scope styling as much as possible. However, I need to override certain style in a (nested) child component based on the classnames present on the parent. My project structure is somwhat like this:

components/
├─ Parent/
│  ├─ Parent.tsx
│  ├─ Parent.module.css
├─ Child/
│  ├─ Child.tsx
│  ├─ Child.module.css

In my Parent.tsx file, I use an animation library (React Transition Group) that triggers various class names over time. I want to use this classes to alter the appearance of an element in Child.tsx. Basically:

.Parent.Parent--timed-class-name .Child .Child__element {
  opacity: 1;
}

In CSS modules this doesn't work because the class names are transformed for isolation (makes sense), but how would I get access to such a child element to override it properly?

For now: using an @value importing an entire selector seems to work on some platforms (but we've seen problems on Windows).

@value Child, Child__element from '../Child/Child.module.css';
 
.Parent.Parent--timed-class-name .Child .Child__element {
  opacity: 1;
}

This seems to work on my machine (MacOS) but gave issues on builds run from a Windows machine. As far as I can till this is undocumented behavior.

Is there/what would be the recommended approach for referencing other modules in selectors?

[OlaoluwaM]

One way I can think of is passing exposing classname of the topmost wrapper of your component to hook onto for overrides, or giving your component a static class name to be used for overrides (an override hook?). So something like this

import React from 'react';
import styles from './ChildComponent.module.css';

const ChildComponent = ({ className }) => {
  return (
    <div className={`${styles.child} ${className}`}>
      <h2>Child Component</h2>
    </div>
  );
};

or

import React from 'react';
import styles from './ChildComponent.module.css';

const ChildComponent = () => {
  return (
    <div className={`${styles.child} classname-to-use-when-you-want-to-override`}>
      <h2>Child Component</h2>
    </div>
  );
};

If you instead wanted to override the styling for an element within the JSX structure, so not the topmost, then using a static class name (an override class name) for said element would be the only option I can think of at the moment. Hope this helps