应用自定义主题时，我可以覆盖 Material UI 中的嵌套对象样式吗？

Question

我创建了自定义主题，我正在尝试设置 Tabs 和 Tab Material UI 组件的样式。但是 Tab 组件是 ButtonBase，因为我不想覆盖所有按钮，所以我尝试像这样覆盖嵌套对象样式：

MuiTabs: {
    root: {
        // Section being applied correctly
        borderRadius: 3,
        padding: 0,
        minHeight: 32,
        backgroundColor: theme.button.backgroundDisabled,

        // NOT being applied
        MuiButtonBase: {
            root: {
                backgroundColor: 'red',
            },
        },
    },
}

未应用 MuiButtonBase-root 样式。我可以不使用像这样的字符串样式来做到这一点吗？

MuiTabs: {
    root: {
        ....                 
        // This IS being applied.
        '& .MuiButtonBase-root': {
             backgroundColor: 'red',
        },
    },
}

有没有办法应用第一种方法而不是字符串样式？

Answer 1

如果您检查选项卡按钮，您会看到一个 类 列表，如下所示：

MuiButtonBase-root MuiTab-root MuiTab-textColorInherit

在Tab之间切换的BaseButton也称为MuiTab，你可以像下面这样定位这个组件并直接覆盖它的样式：

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        backgroundColor: "pink"
      }
    }
  }
});

现场演示