Material UI：如何使用sx属性和SCSS设置列表标记样式？

问题场景 #

现有如下带层级的有序列表结构，需要修改列表标记（如 1.、a.）的字体、颜色等样式：

<List sx={{ listStyle: "decimal", pl: 4 }}>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="A" />
  </ListItem>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="List" />
  </ListItem>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="Item" />
  </ListItem>
</List>

期望效果示例：

1. xxxxx
2. xxxxx
   a. xxxxx
   b. xxxxx
3. xxxxx
4. xxxxx
   a. xxxxx
   b. xxxxx

方法一：使用sx属性内联设置 #

通过CSS伪元素 ::marker 选中列表标记，直接在sx属性中定义样式，支持层级嵌套的差异化设置：

<List 
  sx={{ 
    listStyle: "decimal", 
    pl: 4,
    // 一级列表标记样式
    '& li::marker': {
      color: '#e53e3e', // 标记颜色
      fontSize: '1.2rem', // 字号
      fontFamily: 'monospace', // 字体
      fontWeight: 'bold' // 加粗
    },
    // 嵌套二级列表样式
    '& li > ul': {
      listStyle: 'lower-alpha',
      pl: 4,
      // 二级列表标记样式
      '& li::marker': {
        color: '#319795', // 不同颜色区分层级
        fontSize: '1rem',
        fontWeight: 'normal'
      }
    }
  }}
>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="xxxxx" />
  </ListItem>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="xxxxx" />
    {/* 嵌套二级列表 */}
    <List>
      <ListItem sx={{ display: "list-item" }}>
        <ListItemText primary="xxxxx" />
      </ListItem>
      <ListItem sx={{ display: "list-item" }}>
        <ListItemText primary="xxxxx" />
      </ListItem>
    </List>
  </ListItem>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="xxxxx" />
  </ListItem>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="xxxxx" />
    <List>
      <ListItem sx={{ display: "list-item" }}>
        <ListItemText primary="xxxxx" />
      </ListItem>
      <ListItem sx={{ display: "list-item" }}>
        <ListItemText primary="xxxxx" />
      </ListItem>
    </List>
  </ListItem>
</List>

方法二：使用SCSS全局/模块样式 #

给List组件添加自定义类名，通过SCSS编写样式，适合需要复用的场景：

1. SCSS代码 #

.custom-ordered-list {
  list-style: decimal;
  padding-left: 2rem;

  // 一级列表标记样式
  li::marker {
    color: #e53e3e;
    font-family: 'Courier New', monospace;
    font-size: 1.2em;
    font-weight: 700;
  }

  // 嵌套二级列表
  li ul {
    list-style: lower-alpha;
    padding-left: 2rem;

    // 二级列表标记样式
    li::marker {
      color: #319795;
      font-size: 1em;
      font-weight: normal;
    }
  }
}

2. 组件中引用 #

<List className="custom-ordered-list">
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="xxxxx" />
  </ListItem>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="xxxxx" />
    <List className="custom-ordered-list">
      <ListItem sx={{ display: "list-item" }}>
        <ListItemText primary="xxxxx" />
      </ListItem>
      <ListItem sx={{ display: "list-item" }}>
        <ListItemText primary="xxxxx" />
      </ListItem>
    </List>
  </ListItem>
  {/* 其他列表项 */}
</List>

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