React Material-UI Cookbook

There's more...

If your button is placed in another Material-UI component, it can be difficult to ensure the correct color choice. For example, let's say that you have some buttons in an AppBar component, as follows:

<AppBar color={appBarColor}>  <Toolbar>    <Grid container spacing={16}>      <Grid item>        <Button variant="text" disabled={disabled}>          Text        </Button>      </Grid>      <Grid item>        <Button variant="outlined" disabled={disabled}>          Outlined        </Button>      </Grid>      <Grid item>        <Button variant="contained" disabled={disabled}>          Contained        </Button>      </Grid>    </Grid>  </Toolbar></AppBar>

If the AppBar color value is default, here's what you'll see:

This doesn't actually ...