How are you supposed to style something like cmdk that depends on data attributes for styling

[JonathanLorimer]

I am using cmdk as a lib, and it is impossible to style things like the group headers, as the library only exposes a data-attribute to style, and doesn't accept consumer supplied class names.

I can't use the global style trick for styling children, because data attributes are considered a complex selector.

Any help would be appreciated, thanks!

[askoufis]

I think globalStyle should work just fine for this. For example, to style elements with the cmdk-item attribute, you'd do this:

import { globalStyle } from '@vanilla-extract/css';

globalStyle('[cmdk-item]', {
  color: 'red'
});

[JonathanLorimer]

Ahh, that's helpful, it solves my immediate use case, but that means there can only ever be one global style for those elements. There are different contexts in which you want to apply different styles. For example if the cmdk element appears in a dialog or not.

Still I think this is enough to get me started. Thanks for the quick response!

[askoufis]

The example page for the library seems to do just fine with combinations of attribute selectors. :has should work as a parent selector for styling an element if it's in a dialog or not.