Descendant combinator in griffel styles

[Cam-Bloom]

I am currently working on a project which uses fluent ui and griffel, I have some css code that i would like to replicate in griffel but unsure how to do so.

I my situation is using the accordian from fluent, but we have the situation where we have nested accordians which are autogenerated, I need to be able apply the style to the child accordian in the following way, using background colour red as an example

.fui-AccordionItem .fui-AccordionItem {
    background-color: red;
}

Is there a way to achieve the same in griffel?

[layershifter]

@Cam-Bloom you can do following ⬇️

global

makeStyles({
  global: {
    ':global(.item)': {
      color: 'red',
    },
  },
});

.item .fauc13k {
  color: red;
}

nested

makeStyles({
  global: {
    '& .item': {
      color: 'red',
    },
  },
});

.fn4exxb .item {
  color: red;
}

[Cam-Bloom]

@layershifter Sorry if I am missing something, but have made reproductions of my examples, would you be able to point out where im going wrong, thanks in advance

With CSS, what im trying to achieve
https://stackblitz.com/edit/vitejs-vite-nxazex?file=src%2FApp.tsx,src%2FCssAccordian.tsx,src%2Faccordian.css&terminal=dev

With Griffel
https://stackblitz.com/edit/vitejs-vite-cmuaxv?file=src%2FApp.tsx,src%2FGriffelAccordian.tsx&terminal=dev

[layershifter]

.fui-AccordionItem .fui-AccordionItem {
/*   ^ host             ^ selector */
  background-color: red;
}

const useStyles = makeStyles({
  global: {
    '& .fui-AccordionItem': {
      backgroundColor: 'red',
    },
  },
});

<AccordionItem className={styles.global}> /* host */
  <AccordionItem value="1-1">

https://stackblitz.com/edit/vitejs-vite-vulhgc?file=src%2FApp.tsx,src%2FGriffelAccordian.tsx&terminal=dev

[Cam-Bloom]

Thanks very much for the explanation, and the quick reply