How to use nested css class (cascade) with React CSS Modules

This doesen't work since your .bar class is scoped to the element.

It should work, if you reduce the specificity of the selector to either:

.foo div a

or,

.bar a

When you utilize CSS modules, and you link your class directly to an element - the class name becomes unique, since obfuscation is appended to the class name, as per the CSS modules spec (It is scoped to the element). You can see this by inspecting a DOM element that you have linked to a class with this technique; It looks something like this: component_name-module--class_name--eq-vo.

Because of this, when you try to chain custom selectors like you did originally, the middle part of the selector (.bar) doesen't exist in its original simplicity because of this obfuscation.