Is it possible to enhance global styles in React by adding a :root style block with CSS variables? I included the following code snippet in my layout.tsx file, but when I run it in Visual Studio 2022 React project, the page appears blank. However, if I replace the style block with a meta tag, the meta tag shows up on the page, indicating that react-helmet is functioning properly. Additionally, an error message "(ts) cannot find name --mainThemeF" pops up in Visual Studio when hovering over the style tag.
I'm unsure if the layout.tsx file is the appropriate location for implementing these global styles or if there's a different "Master" type page where this should be done. Could someone confirm if this method of adding global styles in React is correct, as I am relatively new to working with it. Thank you.
<React.Fragment>
<Helmet>
<style type="text/css">
:root {
--mainThemeF: #ffffff;
--mainThemeB: #006633;
etc...
{
</style>
</Helmet>