Fluent UI v9/Griffel中如何用子选择器设置嵌套组件样式？

当然支持！Griffel可以像SCSS那样通过嵌套语法选择子元素，核心是用&符号指代当前的父选择器（也就是你给ul应用的样式类）。

举个实际的代码例子：

import { makeStyles } from '@griffel/react';

const useStyles = makeStyles({
  list: {
    paddingLeft: '20px',
    // 嵌套子选择器，选中ul的子元素li
    '& li': {
      marginBottom: '8px',
      color: '#333',
      listStyleType: 'disc'
    },
    // 还可以继续嵌套更深层的元素
    '& li span': {
      fontWeight: 'bold'
    }
  }
});

// 使用时
const styles = useStyles();
<ul className={styles.list}>
  <li>列表项1<span>（加粗内容）</span></li>
  <li>列表项2</li>
</ul>

上面的代码里，& li会被Griffel编译成类似.list-xxxx li的CSS选择器，完美实现给ul的子li设置样式的需求，和SCSS的嵌套逻辑一致。

你也可以用& > li来精准选择直接子元素的li，避免选中嵌套在其他元素里的li，写法和CSS原生的子选择器规则完全一致。

内容的提问来源于stack exchange，提问作者TommyD