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

Question

我创建了我的自定义主题，并尝试设置 Tabs 和 Tab Material UI 组件的样式。但是选项卡组件是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

在Tabs 之间切换的BaseButton 也称为MuiTab，您可以定位该组件并直接覆盖其样式，如下所示：

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

现场演示