CSS Modules Global Style Override Migration

How to handle the usage of :global in CSS Modules syntax during migration?

In CSS Modules, there are scenarios where the :global is used to override component styles. How should this part of the code be handled during migration?

Solution

Preferably, use codemod for one-click migration. This Codemod will automatically convert the :global in CSS Modules syntax to the syntax in antd-style.

If manual adjustment is needed, simply remove the :global syntax.

Before migration:

After migration:

Principle Analysis

Elements in CSS modules are by default given a hash. The :global syntax is used to avoid adding a hash to the style name. However, antd-style uses emotion/css as the underlying style library, where combined styles do not automatically add a hash. Therefore, simply removing :global is sufficient.

Related Discussions

• 🧐[Issue] How to handle the usage of :global in less syntax during migration