禁用和啟用按鈕的樣式

Question

我有一個按鈕（來自材料 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。

有人可以幫我嗎？ 非常感謝！

Answer 1

您可以通過 2 種方式嘗試：

第一種方法：您可以直接添加styles並像這樣進行驗證（但不推薦直接注入styles）

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

第二種方法：您可以使用 styles 並在您的代碼中進行驗證。

 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

在您的情況下，您可以使用 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>
        </>

    )
}

Answer 3

1. 您可以覆蓋由材料ui注入的css
2. 您可以使用規則名稱

此處的工作演示中涵蓋了這兩個選項

代碼片段

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

簡單易用我的片段：

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

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