禁用和启用按钮的样式答案

【问题标题】：Styling of disabled and enabled button禁用和启用按钮的样式
【发布时间】：2020-10-09 14:57:26
【问题描述】：

我有一个按钮（来自材料 ui），如果未设置日期，该按钮将显示为灰色。如果您设置日期，它应该是可点击的。我想为这些情况设置按钮样式。

这是按钮：

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

这些是我的样式按钮类：

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

我尝试将其应用于假/真检查。如果它为真，它应该应用 .enabledButton，而对于假的情况，它应该应用 .defaultButton。

有人可以帮我吗？非常感谢！

【问题讨论】：

标签： reactjs boolean material-ui boolean-expression

【解决方案1】：

在您的情况下，您可以通过 material-ui 使用 classes 属性。我用函数式组件为你做了一个完整的例子：

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

    )
}

【讨论】：

【解决方案2】：

你可以override css通过材质ui注入
您可以使用rule name

working demo here 中涵盖了这两个选项

代码 sn-p

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

【讨论】：

【解决方案3】：

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

【讨论】：

'&:disabled' 为我工作，谢谢！

【解决方案4】：

您可以通过两种方式尝试：

第一种方法： 您可以直接添加样式并像这样进行验证（但最好不要直接注入样式）

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

第二种方法： 您可以使用样式并在代码中进行验证。

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>

【讨论】：

【解决方案5】：

简单好用的我的sn-p：

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

类

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

【讨论】：