Nested components & styles in fluent ui v9 / Griffel

Question

I have a style for a standard list

export const useOverrides = makeStyles({
    list: {
        ...shorthands.padding("2px", "4px", "8px", "30px"),
    },

I add it to the list

 <ul className={list}>
     <li>item1</li>
     <li>item1</li>
     <li>item1</li>
</ul>

How do I select the li component or any children using normal scss creating the style would be simple.

ul {
 padding: 20px;
 
li {
  color: red
}
}

Can I not target child selectors in this way with griffel?

list: {
    ...shorthands.padding("2px", "4px", "8px", "30px"),
    li: {
        color: "red",
    },
},
 

Answer 1

You have to use the & as reference to the current element:

list: {
    ...shorthands.padding("2px", "4px", "8px", "30px"),
    '& li': {
        color: "red",
    },
    // or even more specific:
    '& > li': {
        color: "red",
    },
},

You can see and try it out yourself here: https://griffel.js.org/try-it-out#nested