Material ui 自定义主题-自定义嵌套组件

我正在实现一个自定义主题，我想自定义菜单项的字体大小。 我可以看到这棵树：

ul（MuiMenu列表） 木犀草根 muilistitemtextroot

如果我想自定义这三个组件，我必须为这三个组件实现覆盖，但我不想覆盖所有

MuiListItemText root

，而只覆盖我的

MuiMenu

中的那些组件

所以我想知道，我可以写这样的东西吗：

MuiMenu: {
  list: {
    padding: 0,

    "& > $MuiListItem$root": {
      // some other formatting here
      "&$MuiListItemText$root": {
        fontSize: 14,
      }
    }
  }
}

我做了一些尝试，但我没有发现一个工作，所以我想知道这是可能的或没有

我的解决方法是以纯CSS的方式编写它，如：

MuiMenu: {
  list: {
    padding: 0,

    "& > li": {
      // some other formatting here
      "& > div > span": {
        fontSize: 14,
      }
    }
  }
}

---

但是如果可能的话，我想要一个更具

材质的Ui

解决方案：D

对于这个目标，

MuiMenuItem

。菜单中的列表项也具有

MuiMenuItem root

类。此中的样式将仅应用于菜单中的菜单项内部

const theme = createMuiTheme({
  overrides:{
    MuiMenuItem:{
      root:{
        color:'red',
        fontSize:14
      }
    }
  }
})

工作演示：