Styling of disabled and enabled button

Question

I have one button (from material ui) which is greyed out if the date is not set. If you set a date it should be clickable. I want to style the button for those cases.

This is the button:

<Button style={{
      marginTop: 10
    }} disabled={this.props.date ? false : true} onClick={this.sendRequest} variant="contained" color="primary">Send Request</Button>

Those are my button-classes for styling:

'.enabledButton': {
        background: '#ffb303!important',
    },
    '.defaultButton': {
        background: '#cfcfcf!important',
    },

I tried to apply it in the false / true check. If its true it should apply the.enabledButton and for the false case it should apply the.defaultButton.

Can someone help me with it? Thank you very much!

Answer 1

You can try it in 2 ways:

1st Method: You can add the styles directly and do the validation like this (but its not preferrable to inject styles directly)

 <div className={classes.root}> <Button variant="contained">Default</Button> <Button style={{ marginTop: 10, backgroundColor: `${this.props.date? '#ffb303':'#cfcfcf'}` }} disabled={this.props.date? false: true} variant="contained" color="primary">Send Request</Button>

2nd Method: You can use styles and do the validation in your code.

 const useStyles = makeStyles((theme) => ({ enabledButton: { backgroundColor: '#ffb303', }, defaultButton: { backgroundColor: '#cfcfcf', }, })); const classes = useStyles();

 <div className={classes.root}> <Button variant="contained">Default</Button> <Button style={{ marginTop: 10, }} disabled={this.props.date? false: true} className={this.props.date? classes.enabledButton: classes.defaultButton} variant="contained" color="primary">Send Request</Button>

Answer 2

In your case you can use classes atribute by material-ui. I made you a full example using a functional component:

import React from 'react'
import Button from '@material-ui/core/Button'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
    button: {
        backgroundColor: '#ffb303',
    },
    disabledButton: {
        backgroundColor: '#cfcfcf',
    }
}))

export default () => {

    const [disabled, setDisabled] = React.useState(false)
    const classes = useStyles()
    const toggleDisabled = () => setDisabled(prev => !prev)


    return (
        <>
        <Button
            disabled={disabled}
            onClick={toggleDisabled}
            classes={{
                root: classes.button,
                disabled: classes.disabled
            }}
            variant="contained"
            >
            Toggle
        </Button>
        <Button
            disabled={!disabled}
            onClick={toggleDisabled}
            classes={{
                root: classes.button,
                disabled: classes.disabled
            }}
            variant="contained"
            >
            Toggle
        </Button>
        </>

    )
}

Answer 3

1. You can override css which is injected by material ui
2. you can use rule name

Both options are covered in the working demo here

Code snippet

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    },
    // using classname
    "& .Mui-disabled": {
      background: "#ffb303"
    }
  }
}));
const useStyles2 = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    },

    "&$disabled": {
      background: "rgba(0, 0, 0, 0.12)",
      color: "red",
      boxShadow: "none"
    }
  },
  disabled: {}
}));

export default function ContainedButtons(props) {
  const classes = useStyles();
  const classes2 = useStyles2();

  return (
    <>
      <div className={classes.root}>
        <Button
          variant="contained"
          color="primary"
          disabled={props.date ? false : true}
        >
          Button (using css name)
        </Button>
      </div>

      <div>
        <Button
          classes={{ root: classes2.root, disabled: classes2.disabled }}
          variant="contained"
          color="primary"
          disabled={props.date ? false : true}
        >
          Button (using rule name)
        </Button>
      </div>
    </>
  );
}

Answer 4

simple and easy to use my snippet:

    <TextField
      fullWidth={fullWidth}
      disabled={disabled}
      onChange={onChange}
      InputProps={{
        classes: {
          underline: classes.underline,
          disabled: disabled ? classes.disabled : {},
        },
      }}
      {...rest}
    />
  )

classes

const useStyles = makeStyles((theme) => ({
  label: {
    paddingRight: theme.spacing(1),
    fontFamily: 'Montserrat Light',
    fontSize: `0.875rem`,
  },
  underline: {
    marginTop: 0,
    marginBottom: 0,
    fontFamily: 'Montserrat Light',
    color: `${$white}`,
    fontSize: `0.875rem`,
    '&::after': {
      borderBottom: `1px solid ${$white}`,
    },
    '&::before': {
      borderBottom: `1px solid rgba(255, 255, 255, 0.36)`,
    },
    '&:hover&::before': {
      borderBottom: `1px solid ${$white}`,
    },
  },
  disabled: {
    '&:hover&::before': {
      borderBottom: `1px dotted rgba(255, 255, 255, 0.36)`,
    },
  },
}))

Answer 5

const useStyles = makeStyles({
  enabledButton: {
    background: '#ffb303!important',
    '&:disabled': {
      background: '#cfcfcf!important',
    }
  },
});

function Componenet() {
  const classes = useStyles();
  ...
  ...
  return (
    <Button
      className={classes.enabledButton}
      disabled={!this.props.date}
      onClick={this.sendRequest}
      variant="contained"
      color="primary"
    >
      Send Request
    </Button>
  );
}