Стиль отключенной и активной кнопки - PullRequest
Новая
       91

Стиль отключенной и активной кнопки

0 голосов
/ 19 июня 2020

У меня есть одна кнопка (из пользовательского интерфейса материала), которая неактивна, если дата не установлена. Если вы установите дату, она должна быть интерактивной. Я хочу стилизовать кнопку для этих случаев.

Это кнопка: 

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

Может ли кто-нибудь помочь мне с этим? Спасибо большое!

Ответы [ 4 ]

0 голосов
/ 14 августа 2020

простой и легкий в использовании мой фрагмент: 

    <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)`,
    },
  },
}))
0 голосов
/ 19 июня 2020

В вашем случае вы можете использовать атрибут classes с помощью material-ui. Я сделал вам полный пример с использованием функционального компонента: 

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

    )
}
0 голосов
/ 25 июня 2020
  1. Вы можете переопределить css, который вводится материалом ui
  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>
    </>
  );
}
0 голосов
/ 19 июня 2020

Вы можете попробовать это двумя способами:

1-й метод: Вы можете добавить стили напрямую и выполнить проверку, как это (но не рекомендуется напрямую вводить стили) 

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

2-й метод: Вы можете использовать стили и выполнять проверку в своем коде. 

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