UI Component Shadowing

[marcwiest]

Howdy, I've been busy all morning long trying to shadow the AspectRatio UI component as I need to add width:100% to the wrapping element.

To not make this more complex than necessary I'm now going to replace this component with a component of my own. However, since I'm using the theme-ui Gatsby theme gatsby-plugin-theme-ui, shouldn't I be able to also shadow theme-ui's UI components?

I'm not sure I'm missing something as I'm still a bit new to Gatsby, but I tried a few different approaches and couldn't get the component shadowed.
Thanks

[jxnblk]

You shouldn't need to use Gatsby's shadowing API for components unless you're using a theme (though technically the gatsby-plugin-theme-ui uses shadowing for configuration). You can use the sx prop or a variant on the AspectRatio component, if you need to adjust the styles

[marcwiest]

Yes, I'm aware that I can modify the UI components via the sx prop. The thing is though, the AspectRatio component does not offer a way to address the (outer most) wrapping element, only the inner element that wraps the {children}.

[lachlanjc]

Closing as a duplicate of #706—we definitely want to put sx on the container tags of components