How to set the theme's background color in the React Application

[anilpap]

Is there a way to set primereact's theme's background color to the entire body? Currently, only theme is being applied to only the components and not the body. The examples allow the entire body to be switched (for example -> bootstrap4-dark-purple), but am unable to replicate this behavior in my react app.
Any help will be appreciated.
I am using:

"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primereact": "^5.0.2"

Currently the app looks this way:

ReactDOM.render(
<React.StrictMode>
<div className="????" >
<h1>Sample body</h1>
</div>
</React.StrictMode>,
document.getElementById('root')
);

Thank you!

[mert.sincan]

You can do it using the exported theme variables like in showcase. Please see;

Code: Select all

body {
    ...
    background-color: var(--surface-a);
    font-family: var(--font-family);
    color: var(--text-color);
}

:root {
    --surface-a: #2a323d;
    --surface-b: #20262e;
    --surface-c: rgba(255, 255, 255, 0.04);
    --surface-d: #3f4b5b;
    --surface-e: #2a323d;
    --surface-f: #2a323d;
    --text-color: rgba(255, 255, 255, 0.87);
    --text-color-secondary: rgba(255, 255, 255, 0.6);
    --primary-color: #c298d8;
    --primary-color-text: #151515;
    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

Best Regards,