What is the best method to change theme properties during componentWillMount in preact

[otherjohn]

Hi all,
I am building a web-compontent and would like to allow some CSS property values to be set dynamically by the web-component's properties. Can someone point me in the right direction?

I tried the following but I get

Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at setVar (vanilla-extract-dynamic.esm.js:40:11)
    at eval (vanilla-extract-dynamic.esm.js:49:7)
    at walkObject (vanilla-extract-private.esm.js:40:20)
    at walkObject (vanilla-extract-private.esm.js:42:20)
    at setElementVars (vanilla-extract-dynamic.esm.js:45:73)
    at b.Calculator [as constructor] (app.island.tsx:41:76)
    at b.q [as render] (preact.module.js:16:9009)
    at M (preact.module.js:16:6532)
    at P (preact.module.js:16:1961)
    at M (preact.module.js:16:6746)

I have something like this:

export const WebComponent = ({ primaryColor }: { primaryColor: string }) => {
   setElementVars(this, {
  [primaryColor]: primaryColor,
});
   ...
return(
  <stuff></stuff>
 )
}
const app = createIslandWebComponent('my-webcomponent', WebComponent)
app.render({
  selector: 'my-webcomponent',
})

...
<my-webcomponent data-primaryColor="#FF0000" />

[otherjohn]

It looks like I figured it out using assignInlineVars. I am still not sure it is the best method to do this, but it works.

I still need to see if I can make it work with the "defaults" in the GlobalTheme if no props have been passed to the component.

[askoufis]

I would say that assignInlineVars is correct here, assuming you want to dynamically assign any value. If you only have a subset of allows primary colors (for example), you could be more strict and use sprinkles, or something similar.