'React & CSS: How to override :root in css module in React?

Short question. I'm trying to build a theme selector for an app and was wondering how to change the :root of a css module in a press of a button in jsx.

cssreactjsthemesjsx


Solution 1:[1]

Update: I discovered something. I wonder if its ok to do it like this tho

import React, {useState} from 'react'
const _settings = () => {
    function x() {
        document.querySelector(':root').style.setProperty('--primary-color-darkgreen', "red")
    }
    return (
        <div>
            <button onClick={x}></button>
        </div>
    )
}

export default _settings

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nugget

Related Questions