React Material-UI and color: warning - reactjs

Question

I am new to React and MUI and maybe I am just missing something.
I am trying to make a button with color='warning' that is defined in my palette like this (the theme works and I can use primary and secondary colors):
const theme = createMuiTheme({
palette: {
primary: {
main: '#70B657'
},
secondary: {
light: '#2face3',
main: '#4199D8',
contrastText: '#ffcc00'
},
warning: {
main: '#BC211D'
}
}
});
I noticed in the documentation that the <Button> color prop only takes default|inherit|primary|secondary so it is not possible to use it like that.
So what is the CORRECT or best practice to use warning colored button in Material-UI? I think this is a basic thing and should be pretty easy to achieve..??
Preferably a solution that does not involve making several different Themes and importing them when needed.
Thanks!

Answer 1

Usage:
const useStyles = makeStyles(theme => ({
root: {
color: theme.palette.warning.main
}
}));
Full code:
import React from "react";
import "./styles.css";
import { Button } from "#material-ui/core";
import { createMuiTheme, ThemeProvider } from "#material-ui/core/styles";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
color: theme.palette.warning.main
}
}));
function YourComponent() {
const classes = useStyles();
return (
<div className="App">
<Button variant="contained" classes={{ root: classes.root }}>
Secondary
</Button>
</div>
);
}
const theme = createMuiTheme({
palette: {
warning: { main: "#FFFFFF" }
}
});
export default function App() {
return (
<ThemeProvider theme={theme}>
<YourComponent />
</ThemeProvider>
);
}
Update
Pass props to makeStyles
import React from "react";
import "./styles.css";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = props =>
makeStyles(theme => ({
root: {
color: props.value === "111" ? "red" : "blue"
}
}));
const Comp = props => {
const classes = useStyles(props)();
return <input defaultValue={props.value} className={classes.root} />;
};
export default function App() {
return (
<div className="App">
<div>
<Comp value={"111"} />
</div>
<div>
<Comp value={"222"} />
</div>
</div>
);
}

Answer 2

yeah I don't understand why the first example would work and the second dont.
app component
const theme = createMuiTheme({
palette: {
primary: {
main: '#bed000',
},
secondary: {
main: '#110b36',
},
error: {
main: '#B33A3A',
},
},
})
<MuiThemeProvider theme={theme}>
<Route exact path="/" component={LoginView} />
</MuiThemeProvider>
<LoginView>
<TextField
autoFocus
label="Contraseña"
name="Password"
type="Password"
value={values.Password}
onChange={handleChange}
onBlur={handleBlur}
fullWidth
color={touched.Password && errors.Password ? "primary" : "secondary"}
/>
<TextField
autoFocus
label="Contraseña"
name="Password"
type="Password"
value={values.Password}
onChange={handleChange}
onBlur={handleBlur}
fullWidth
color={touched.Password && errors.Password ? "error" : "secondary"}
/>
</LoginView>