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:
.container {
:global(.ant-btn-link) {
padding: 0;
font-size: 12px;
}
}
After migration:
const useStyles = createStyles(({ css }) => ({
container: css`
.ant-btn-link {
padding: 0;
font-size: 12px;
}
`,
}));
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.