Material-UI Color Prop Options - reactjs

Question

I currently have the following theme using material-ui:
import { createMuiTheme } from "#material-ui/core/styles";
import { blue, green } from "#material-ui/core/colors";
const theme = createMuiTheme({
palette: {
primary: blue,
secondary: green,
},
});
export default theme;
Now, if I do a console.log of the green object that I import from material-ui colors, I get a color object like this:
green = {
50: "#e8f5e9"
100: "#c8e6c9"
200: "#a5d6a7"
300: "#81c784"
400: "#66bb6a"
500: "#4caf50"
600: "#43a047"
700: "#388e3c"
800: "#2e7d32"
900: "#1b5e20"
A100: "#b9f6ca"
A200: "#69f0ae"
A400: "#00e676"
A700: "#00c853"
}
As such, I thought I could style my AppBar component as follows: <AppBar color="secondary.800">.
This, however, does not work. I also tried: <AbbBar color="secondary[800]"> and that also does not work.
I have even tried this variation with the theme:
import { createMuiTheme } from "#material-ui/core/styles";
import { blue, green } from "#material-ui/core/colors";
const theme = createMuiTheme({
palette: {
primary: blue,
secondary: {...green},
},
});
export default theme;
This also does not work.
Is there a way for me to access the different color variations in the green color object vis-a-vis the color prop in the AppBar component?
If so, how?
Thanks.

Answer 1

What you are trying to do is not possible with Material UI. You can only set the color variant (primary or secondary) and the color will be taken from your theme.
To manually set a different color, you will need to override the component's style.
import { withStyles } from "#material-ui/core/styles";
import { blue } from "#material-ui/core/colors";
const MyChildComponent = ({ classes }) => <AppBar classes= {{ root: classes.root }} />
const styles = () => ({
root: {
backgroundColor: blue[400],
}
});
export default withStyles(styles)(MyChildComponent);
--------
import { withStyles } from "#material-ui/core/styles";
import { green } from "#material-ui/core/colors";
const MyParentComponent = ({ classes }) => <MyChildComponent classes={{ root: classes.someClass}} />
const styles = () => ({
someClass: {
backgroundColor: green[400],
}
});
export default withStyles(styles)(MyParentComponent);
Of course you could define some internal logic to decide which class to apply in your child component based on some prop that you pass down.
import clsx from "clsx";
import { withStyles } from "#material-ui/core/styles";
import { red, green, blue } from "#material-ui/core/colors";
const MyChildComponent = ({ color, classes }) => <AppBar className={clsx({
[classes.red]: color === "red",
[classes.blue]: color === "blue,
[classes.green]: color === "green",
})}/>
const styles = () => ({
red: {
backgroundColor: red[400],
},
green: {
backgroundColor: green[400],
},
blue: {
backgroundColor: blue[400],
},
});
export default withStyles(styles)(MyChildComponent);
--------
const MyParentComponent = () => <MyChildComponent color="red"/>
export default MyParentComponent;
Personally, I would just go for manually overriding the classes as shown above.

Answer 2

As per Material UI documentation, you can access color variations with array notation and define theme like
const theme = createMuiTheme({
palette: {
primary: {
main: blue[600]
},
secondary: {
main: green[800]
}
}
});
Working Code sandbox link: https://codesandbox.io/s/material-colors-9hnqh?file=/src/App.js