MaterialUI Button Could not override style

Question

Could not override the style using className on a Button. The same style works correctly on a TextField. Using style prop allows to override Button style. What am I missing?

Issue link: https://codesandbox.io/s/bold-dewdney-r6y8u

Same Code:

import React from "react";
import { Button, TextField } from "material-ui";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  buttonStyle: {
    backgroundColor: "#ADD8E6"
  }
}));

const App = () => {
  const classes = useStyles();

  return (
    <div>
      <Button className={classes.buttonStyle}>Failed Submit</Button>
      <Button style={{ backgroundColor: "#CACACA" }}>Working Submit</Button>
      <br />
      <br />
      <TextField className={classes.buttonStyle} label="Name" />
    </div>
  );
};

export default App;

You are importing `Button` from the wrong package. Please see this post: https://stackoverflow.com/questions/56875498/difference-between-material-ui-vs-material-ui-without-at-sign/56875978#56875978 — Ryan Cogswell, Feb 08 '21 at 04:27
It looks like you started changing your sandbox to use `@material-ui/core` instead of `material-ui`; however, you were using the alpha of v5 instead of the stable v4 version. With v4 your code works fine: https://codesandbox.io/s/wonderful-meitner-9u38d?file=/src/App.js. — Ryan Cogswell, Feb 08 '21 at 14:38
Thank you @RyanCogswell, you are correct. After changing the library from `material-ui` to `@material-ui/core` everything worked even for alpha-24 version. — new_programmer, Feb 09 '21 at 04:07

score 0 · Answer 1 · answered Feb 08 '21 at 04:14

It's actually a lot simpler. Create an arbitrary style object:

const style = {
  backgroundColor: "#ADD8E6"
};

Apply it to your button:

<Button style={style}>Failed Submit</Button>

Sandbox: https://codesandbox.io/s/funny-poitras-e1s3y?file=/src/App.js

score 0 · Answer 2 · answered Feb 08 '21 at 05:59

0

If you don't want to use the material-UI override system, you can override by using styled-components styled-components, which is much simpler

answered Feb 08 '21 at 05:59

Anil Loutombam

355
6
19

Jason Parra · Answer 3 · 2021-02-08T03:55:02.483

-2

You should use the !important keyboard in the css style.

const useStyles = makeStyles((theme) => ({
 buttonStyle: {
  backgroundColor: "#ADD8E6 !important"
 }
}));

edited Feb 08 '21 at 03:55

answered Feb 08 '21 at 03:49

Jason Parra

97
6

The style works file when applied via `style` prop. Issue is for the "Failed Submit" button. The backgroundColor from buttonStyle is not applied to the "Failed Submit" button. – new_programmer Feb 08 '21 at 03:53
1

I updated the answer, hope this help. you need to add the !important atribute to the json object style. buttonStyle: { backgroundColor: "#ADD8E6 !important" } – Jason Parra Feb 08 '21 at 03:54
Thank you for the answer. Is there any reason why styles using `className` works on many components(eg: `TextField`) , but not on `Button`? – new_programmer Feb 08 '21 at 04:00
1

Well, styles override classes because the class css is loaded first and then the style css is loaded. The reason the class works on the Button probably (you could check in devtools) has an !important in the material-ui css but, your local !important is overriding the themes !important tag... Just speculation but, you could check what material-ui is using to verify. – Nicholas_Jones Feb 08 '21 at 04:08
I don't have much experience using material-UI, but usually, the style props tend to have more hierarchical relevance than the className, most of the time the style prop doesn't need to use the "!important" keyboard cause the CSS properties are directly applied to the component itself, sorry for my English – Jason Parra Feb 08 '21 at 04:08
Thank you!. I got into the wrong assumption that whatever we apply using `className` will be the final (I thought the order of class maters as mentioned in https://github.com/mui-org/material-ui/issues/20003). But that is not the case, only the order of declaration & specificity matters. The background style on TextField worked, cause that style was not there in MUI class. So it looks like we need to use `!important` in any common styles. For example: margin style on `TextField` cannot be overriden without `!important` when using `className`. – new_programmer Feb 08 '21 at 04:24

MaterialUI Button Could not override style

3 Answers3