Building Fluentic Style: Styling DOM You Do Not Own With `createSheet`

This is part of my Building Fluentic Style series, where I’m writing down the design decisions, tradeoffs, and small surprises from building Fluentic Style. Most Fluentic examples start with a component that owns its DOM. <button css={styles.root}> <span css={styles.icon}>{icon}</span> <span css={styles.label}>{children}</span> </button> That is the clean case. The component renders the elements. The component owns the styles. The css prop attaches directly to the element that needs the style. But not every UI is made of DOM you own. Sometimes the interesting markup belongs to a third-party library. A select library owns the control. A date picker owns the calendar cells. A rich text editor owns the content DOM. A table library owns row and cell wrappers. A menu might render its panel in a portal. In those cases, the problem changes. The question is no longer: How do I style the element I am rendering? The question b