How to pass a different shade of color to a Component using React Material UI

Question

I have the following element:

<AppBar color="secondary">
  <Toolbar>
    ...
  </Toolbar>
</AppBar>

wrapped inside a ThemeProvider of:

palette: {
  primary: blue,
  secondary: blueGrey
}

The AppBar is now colored with blueGrey as expected. Although, I want the AppBar to be with a shade. How do I set the shade of the AppBar color to be 900 (which is #263238)?

TL;DR - Looking for a way to do:

<AppBar color="secondary" shade="dark">

Answer 1

There isn't any way to do this via props, but you can use withStyles to override the background color as shown below.

import React from "react";
import ReactDOM from "react-dom";

import blue from "@material-ui/core/colors/blue";
import blueGrey from "@material-ui/core/colors/blueGrey";
import {
  ThemeProvider,
  createMuiTheme,
  withStyles
} from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Typography from "@material-ui/core/Typography";
import Toolbar from "@material-ui/core/Toolbar";

const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: blueGrey
  }
});
const DarkAppBar = withStyles(theme => ({
  colorSecondary: {
    backgroundColor: theme.palette.secondary.dark
  }
}))(AppBar);
function App() {
  return (
    <ThemeProvider theme={theme}>
      <DarkAppBar color="secondary">
        <Toolbar>
          <Typography variant="h6">My AppBar</Typography>
        </Toolbar>
      </DarkAppBar>
    </ThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);