Why is it impossible to style a success button in @material-ui

This is not a full/working example, but hopefully it provides some context. The Main component is included (eventually) via an AuthenticatedRoute within the Router shown in App.js. It doesn't really add anything to show all that complexity, but I wanted to give you some context.

Steps:

1. Create theme using createMuiTheme.
2. Add a ThemeProvider component with a theme prop that accepts your theme. This should be a parent to any Component that will make use of the theme, ours is in App.js.
3. Use the optional argument that makeStyles has to pass your theme into your Component (Main in my example). You can see examples where we access theme properties such as theme.palette.brand.primary.
4. Use the useStyles hook to create a variable in your component.
5. Apply those styles to your Component's elements via the className prop. For example, <div className={classes.root}>...</div>
6. Repeat 3-5 on any Component that needs styling.

I'm still learning my way around Material UI; we just recently migrated from react bootstrap to MUI. We still have some *.scss files laying around, but everything can co-exist. Our eventual plan is to move everything into the makeStyles hooks, but we haven't had time to refactor everything yet.

As a non-CSS guru, I much prefer to write the styling as code (even if I have to write some boilerplate) than to deal with .scss files and specificity/inheritance.

Theme.js:

import { createMuiTheme } from '@material-ui/core/styles';

export default createMuiTheme({
  palette: {
    brand: {
      primary: '#1b3c6b',
      primaryLight: '#adceff',
      secondary: '#2a5da6',
      tertiary: '#bf1e2e',
      tertiaryLight: '#c35f69',
    },
  },
  typography: {
    color: '#333',
  },
  sidebar: {
    header: {
      background: '#2a5da6',
    },
    content: { background: '#fff' },
  },
  status: {
    danger: 'orange',
  },
});

Main.js (partial):

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  appBar: {
    background: theme.palette.brand.primary,
    boxShadow: 'none',
    '& .MuiTabs-indicator': {
      backgroundColor: theme.palette.brand.primaryLight,
      height: 3,
    },
    position: 'fixed',
    zIndex: 1000,
  },
}));

const Main = React.memo(props => {
  const classes = useStyles();

  ...

  return (
    <div className={classes.root}>
      <AppBar className={classes.appBar} position="static">
      ....
      </AppBar>
    </div>
  );
}

App.js (partial):

import { CssBaseline, ThemeProvider } from '@material-ui/core';
import theme from 'Theme/Theme'; // Theme.js from above

...

class App extends Component {
  ...

  render() {
    ...
    return (
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Router>
          ...
        </Router>
      </ThemeProvider>
    );
  }
  ...
}