Can I override nested object styles in Material UI when applying custom theme?

Question

I created my custom theme, and I'm trying to style the Tabs and Tab Material UI component. But the Tab Component is a ButtonBase, and as I don't want all buttons to be overriden, I tried to override nested object styles like this:

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

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

the MuiButtonBase-root style is not being applied. Can I do that without using string styles like this?

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

Is there any way to apply the first approach and not string styling?

@NearHuscarl None, just curious and asking if this is possible. — Sonhja
The closest you can do if you don't want nested css selector is to override the default props classes, but the Tabs component doesn't expose the tabButton ruleName to override so in your case, the answer is no. — NearHuscarl

NearHuscarl NearHuscarl · Accepted Answer · 2021-04-20T08:11:44

If you inspect the tab button, you will see a list of classes that look like this:

MuiButtonBase-root MuiTab-root MuiTab-textColorInherit

The BaseButton to switch between Tabs is also called MuiTab, you can target this component and override its styles directly like below:

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

Can I override nested object styles in Material UI when applying custom theme?

1 Answers

Live Demo