I am using makeStyles for adding styles to button, but in app there is included some other third party css file that overrides my styles without '!important'. I tried this approach, but it's not working, property is not generated in browser:

const useStyles = makeStyles({
  button: {
    backgroundColor: props => props.actionBackgroundColor,
    borderColor: props => props.actionBackgroundColor,
    color: props => {
      if (props.actionTextColor) {
        return `${props.actionTextColor} !important`;
      }
      return null;
    },
    '&:hover': {
      backgroundColor: props => props.actionHoverColor,
      borderColor: props => props.actionHoverColor,
      color: props => {
        if (props.actionHoverTextColor) {
          return `${props.actionHoverTextColor ? props.actionHoverTextColor : props.actionTextColor ? props.actionTextColor : null} !important`;
        }
        return null;
      }
    }
  }
});

I am using makeStyles for adding styles to button, but in app there is included some other third party css file that overrides my styles without '!important'. I tried this approach, but it's not working, property is not generated in browser:

const useStyles = makeStyles({
  button: {
    backgroundColor: props => props.actionBackgroundColor,
    borderColor: props => props.actionBackgroundColor,
    color: props => {
      if (props.actionTextColor) {
        return `${props.actionTextColor} !important`;
      }
      return null;
    },
    '&:hover': {
      backgroundColor: props => props.actionHoverColor,
      borderColor: props => props.actionHoverColor,
      color: props => {
        if (props.actionHoverTextColor) {
          return `${props.actionHoverTextColor ? props.actionHoverTextColor : props.actionTextColor ? props.actionTextColor : null} !important`;
        }
        return null;
      }
    }
  }
});

is there any workaround?

• javascript
• reactjs
• material-ui

• Are this styles that you want to override ing from the material-ui ponents that you are trying to use? – yuri Commented Dec 24, 2019 at 8:46
• no, As I said it's some custom third party library, just css file. – vakho papidze Commented Dec 24, 2019 at 8:54

2 Answers 2

Can u please check this sandbox. There is a CustomButton ponent where I implemented your solution and it's working fine.

Code Sandbox

Seems I was using old version of material ui;

"@material-ui/core": "^3.9.2", "@material-ui/styles": "^4.4.1",

That's issue, seems '!important' does not work with that version. So I need to upgrade it.