Hey thanks. I'm a bit torn on that one. I feel like sometimes it makes it confusing to read as code blocks but I'll think on it now. Thanks for the feedback though either way
I prefer not to do direct DOM manipulation with libraries like Vue or React if possible, so for something like this, instead of setting the style on the `documentElement`, I would put it right in the template/JSX as a style attribute on one of the elements: `...` This, of course, requires a `useState` variable to hold the values and also requires you to have an appropriate element to put the styles on, so if the controlling component doesn't have access to the element that is getting controlled, then you'll need some type of global state.
In React that is going to raise an error. This the solution to complement your suggestion: function Component() { const myCustomStyle = { "--my-css-var": 10 } as React.CSSProperties; return {...} }
To take this 1 step further, how would we implement this to a database for users? Basically, a user with a admin page can customer a look of something/thier page.
hey! you would likely want to store the "theme" ID within the database and use that ID to add the scope to the DOM found this that might help css-tricks.com/a-dry-approach-to-color-themes-in-css/
i think it depends on how you use it just like anything else. CSS is a powerful mechanism for controlling styles on a website, but you should use it with care and make sure that the JavaScript mechanisms you're using don't run out of control for most standard use cases i wouldn't expect it to have any issues
Whats the benefit of this over using state and directly modify React Element ? Wouldnt this be a bad practice as it directly modifies the DOM, which violates the principle of React.
i think it really depends on your use case and what you're trying to do. there's definitely a preferred flow for working with react but there's a reason why they provide the APIs to access the DOM natively. being able to programmatically work with CSS Custom Properties is a good instance of that. State might dictate the results of that, such as using a useEffect to update a custom property value based on state, but afaik there is no native custom property API for react
@@thezouchcoop 😂😂😂😂 well thanks for the correction, i'll be honest I was never great at some of the vocabulary of grammatical things, thought it was close though... funny enough looking for it on Google, the wikipedia for Postfix (Linguistics) redirects to Suffix en.wikipedia.org/wiki/Postfix_(linguistics) at least you knew what i meant! haha
