Material-ui: Override properties for components

[lotusms]

I'm trying to use overrides to style my app accordingly without creating so many classNames. However, I can't find a list of names that MUI will recognize as well as the allowed properties it will allow me to override.

For instance, If I want to override the Tabs I found that I can use MuiTabs.
Then I can override the root and inside the root it accepts background: '#2D323E', and color: '#d0d2d7', Something like this

export const DarkOrangeTheme = {
   palette: {
   },
   overrides: {
      MuiTabs: {
         root: {
             background: '#2D323E',
             color: '#d0d2d7',         
         },
      },
   },
};

export default DarkOrangeTheme;

1. What are correct names for the rest of the components recognized by MUI-Next? (Buttons, Typography, Lists, AppBar, Switches, etc)
2. What properties will each of them accept? (background, color, checked, selected, height, padding, fontWeight, etc.. )

A similar approach to how MUI v.0 overriding was done

toggle: {
    thumbOnColor: deepOrange900,
    thumbOffColor: '#BDBDBD',
    trackOnColor: deepOrange800,
    trackOffColor: '#717171',
    trackDisabledColor: '#50535a',
    thumbDisabledColor: '#3d4454',
},
listItem: {
    primaryTextColor: deepOrange900,
},
stepper: {
    backgroundColor: deepOrange900,
    hoverBackgroundColor: deepOrange900,
    iconColor: '#2D323E',
    hoveredIconColor: '#2D323E',
    inactiveIconColor: '#717171',
    textColor: '#2D323E',
    disabledTextColor: '#d0d2d7',
    connectorLineColor: '#d0d2d7',
},

[oliviertassinari]

@lotusms Is that what you are looking for https://material-ui-next.com/api/button/#css-api?

If using the overrides key of the theme as documented here, you need to use the following style sheet name: MuiButton.

[lotusms]

So how do I find the name for every component? Just add Mui in front of the component name?

[oliviertassinari]

I can't find a list of names that MUI will recognize

It' not something you should need. The "nominal" use case is to look for elements you want to customize with the dev tool. The class names start with the value you are looking for. Otherwise, we have this list: https://github.com/mui-org/material-ui/blob/2726ab46b2b1789bdd0a9aa1a2ff249a443ab1a8/packages/material-ui/src/styles/overrides.d.ts#L91-L173.

as well as the allowed properties it will allow me to override.

I have answered it in my previous comment. You will find it in the classname value or in the API documentation sections.

[oliviertassinari]

The classname pattern in dev mode:

.${overrideKey}-${classesKey}-X

Let's take an example:

.MuiButton-disabled-3

[mbritton]

Thanks @lotusms for asking that question. The reply helped me.

[shiraze]

Thanks! That really helped me get smaller radio buttons:

     MuiRadio: {
      root: {
        height: theme.spacing(4),
        width: theme.spacing(4),
        backgroundColor: "transparent",
        "& .$MuiSvgIcon-root": {
          fontSize: "1.25rem",
        },
      },
    },