Styling of disabled and enabled button

user_13268535 0
Viewed 6751

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!

material-ui reactjs boolean-expression boolean
5 Answers
  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>
    </>
  );
}
user_132073940

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>
        </>

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

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>

user_18458300

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)`,
    },
  },
}))
user_23889940
Related