Initially, I encountered a problem where the antd styles on my page were taking 1 to 2 seconds to load, causing my page to render incorrectly during that time. However, thanks to the helpful guidance provided in this answer about the solution to the slow Antd styles loading problem, I was able to resolve this issue.
Now, a new challenge has arisen where the ":where" styles of antd are overriding my custom CSS classes. Despite trying various solutions, I am stuck as I do not want to resort to using "!important" in my CSS for a fix.
While my page now renders perfectly, the issue of styles being overridden persists.
This is just one example of many parts of my site experiencing this issue, as seen in the images below:
https://i.sstatic.net/Y8yse.png
https://i.sstatic.net/BIEuQ.png
In the above images, the ":where" selector of antd is taking precedence over my custom "buttonStyle" styles because it appears before my class styles in the styling hierarchy.
Here is my AntdStyledComponentsRegistry component:
'use client';
import React from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
export default function AntdStyledComponentsRegistry({ children }: { children: React.ReactNode }) {
const [cache] = React.useState(() => createCache()); // gets antd cached styles
// innsert cache style on the server
useServerInsertedHTML(() => (
<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}></style>
));
return <StyleProvider cache={cache}>{children}</StyleProvider>;
}
And here is my main layout.js file:
'use client';
import React, { useEffect, Suspense, lazy } from 'react';
import dynamic from 'next/dynamic';
import { NavBar } from '../../../components';
import AntdStyledComponentsRegistry from "../../utils/AntdStyledComponentsRegistry"
import './dashboardStyle.scss';
const SideBar = dynamic(() => import('../../../components/SideBar'), { ssr: false })
export default function Layout({ children }) {
return (
<AntdStyledComponentsRegistry>
<section>
<div className="dashboard">
<NavBar />
<div style={{ display: "flex" }}>
<div className="layout-side-bar">
<>
<SideBar />
</>
</div>
<div>
<div className="lower-layout">
<div className="layout-side-body">{children}</div>
</div>
</div>
</div>
</div>
</section>
</AntdStyledComponentsRegistry>
);
}