I am in search of a solution that will offer some styling flexibility within a CMS to dynamically alter the classes of specific components within my NextJS application. The code snippet I'm working with is as follows:
pages/index.js:
...
import client from "../lib/client";
const Home = ({ headerConfig }) => {
return (
<>
<Header headerConfig={headerConfig} />
...
</>
);
};
export const getServerSideProps = async () => {
const headerConfig = await client.getDocument("headerConfig");
return {
props: { headerConfig },
};
};
export default Home;
components/Header.jsx:
const Header = ({ headerConfig }) => {
return (
<nav className={`relative ... ${headerConfig.bgColour}`}>
...
</nav>
);
}
export default Header
Despite injecting the class into the attribute on the browser, the styling fails to apply and the background color remains unchanged.
https://i.sstatic.net/TNz4F.png
I acknowledge that my current approach is flawed, but I am at a loss on how to rectify this issue. Could someone provide guidance to steer me in the right direction?