React Material-UI and color: warning

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!

Snowshoe

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>
  );
}

Mou

Ok so you are using a class here to style it. What about when the button is disabled for example? When using color prop, it handles the lighter color when needed etc, – Snowshoe

@Snowshoe using a class is the suggested style implementation in MUI, for your further question, kindly refer the updated part of this post – Mou

@Snowshoe Did this post help? Kindly give some feedback would be appreciated. – Mou

I would like to know a method where the component takes use of the palette and features of the Theme more comprehensively, not just a workaround. But thanks anyway! – Snowshoe

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>

Reiterant