The reason for the different way of import was due to Ant Design's babel-plugin-import automatically optimizing CSS/Component imports.
After monitoring the rendered tree & network tab in Chrome devtool, I saw new CSS chunks were being loaded when accessing new Wizard step components.
What I realized is that AntD components had its own CSS-in-JS, thus lazily loading AntD components loaded CSS after my custom CSS in the head, overriding my style in result.
👷 What I did...
I am still researching but can't figure out how to import CSS in React and keep it as the last style loaded.
So the workaround I adopted was to move styles.css to a static file location (public/) and imported it in the body (as CSS-in-JS chunks were loaded in the head).
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>🍔 Bunpkg - B{uild}unpkg{URL}</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
...
+ <link rel="stylesheet" href="styles.css" />
</body>
</html>