Apply styles directly with styles prop

[arcasoy]

I'm developing a web component library. Due to the nature of Shadow DOMs, using className in JS and referring to a class defined in an external CSS or SCSS file is not feasible. I'd like to be able to directly edit the style tag of the component by passing a style={} prop.

This is, in fact, just a means to an end and I'd like the width:100% height: 100% that is applied when the fullscreen is active to be applied at all times, since the component is not large enough. But either way, I think adding this style prop pass through would enable others to tweak the full screen wrapper as they see fit.

[wchargin]

+1 for a different reason. We use Tailwind for most styling, but style for some attributes that Tailwind doesn't support. In this case, I wanted to write:

return (
  <FullScreen className="grid" style={{gridTemplateAreas: "..."}}>
    {/* some children in a grid layout */}
  </FullScreen>
);

but since I cannot apply styles to the FullScreen itself, I have to use an extra wrapper div.