Trouble Applying Styles to h1 Tag Inside a Class

[ryanbae94]

I'm facing an issue with applying styles to an h1 tag inside a specific class.

 export const right = style({
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  selectors: {
    '& h1': {
      color: 'blue',
    },
  },
});

I'm trying to change the properties of the h1 tag within the right class, but it seems like the styles aren't being applied correctly. I've used the & h1 selector in the right class to target the h1 tags inside it. However, I'm not seeing the expected changes when I view my application. While I can successfully apply styles using globalStyle, this is not my preferred approach. My goal is to apply styles to h1 tags within a specific class without using globalStyle or direct class naming on the h1 tags.

[kasper573]

Hello! This is an intentional limitation of style selectors. You have to use globalStyle for this, or create an individual style that you apply as a class to the child element (this is the recommended approach). You can read more about the rationale here: https://vanilla-extract.style/documentation/styling/#complex-selectors