Passing CSS into custom widgets

[JustinG]

Right now there is nothing in your 3-way toggle that accepts the style property. When you are configuring a custom widget all of the config options get passed to the widget as the widget props (which is why in when you configure your 3-way toggle your item config becomes props.item which you then use in the 3-way toggle expressions).

The style configuration, in this case, is no different. It will be passed to the custom widget as props.style and you have no expression in your custom widget that includes a props.style.

You can look at this widget for an example:

Confirm Button

[logo] I’m a doofus. I’ve long since stopped making excuses and just accpeted the fact that if a delicate item can be dropped, or an unintended system can be trigged, or a wrong button can pushed, I’m very likely going to drop, trigger, or push it. Case in point: I have a few buttons in my OH UI that are extremely useful, but only under very certain circumstances (for example, a button that turns off all the lights in the house). Naturally, I have the tendancy to occasionally press these button…

In your case, you have an easy solution because the root container in your 3-way toggle doesn’t have any style parameter already in use and that’s where you would want these styles to be applied anyway:

component: f7-row
config:
  style: =props.style

You don’t even have to add the style property to the parameter list at the top if you don’t want to. That only determines how the properties are displayed in the configuration wizard that pops up when you use UI configuration for the widget. But, you cannot create the style object in that manner anyway so this only works when configuration is in an editor like your current use case.