Как изменить цвет фона пульсации на кнопке?

Question

Пока что в API (v3.9.2) я вижу упоминание TouchRippleProps для ButtonBase для https://material -ui.com / api / button-base /

Моя кнопка выглядит как

<Button variant="text"
                  size={"large"}
                  fullWidth
                  className={classes.button}
          >
            {value}
          </Button>

, а моя кнопка style есть.

 button: {
    backgroundColor: colors.surface,
    borderRadius: 0, // to make buttons sharp edged
    touchRipple: colors.primary
  }

Когда я касаюсь кнопки, я вижу белый фон (см. Номер 5) как Мой вопрос заключается в том, как при касании кнопки как я могуизменить фон с white, скажем, blue, а затем позволить ему исчезнуть?

ОБНОВЛЕНИЕ .

Answer 1

Я достиг разумного поведения со следующими изменениями в вашем numberPadStyle:

const numberPadStyle = theme => ({
  button: {
    backgroundColor: colors.surface,
    borderRadius: 0, // to make buttons sharp edged
    "&:hover": {
      backgroundColor: colors.primary,
      // Reset on touch devices, it doesn't add specificity
      "@media (hover: none)": {
        backgroundColor: colors.surface,
        "&:active": {
          backgroundColor: colors.primary
        }
      }
    },
    "&:active": {
      backgroundColor: colors.primary
    }
  }
});

Проблема с сенсорными экранами заключается в том, что прикосновение вызывает эффект "зависания", и оно не исчезает, пока выкоснуться где-нибудь еще."@media (hover: none)" нацеливает эффект наведения мыши на сенсорные устройства (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover). «Активный» CSS действует во время касания / щелчка, а затем пульсация, встроенная в Button, заботится обо всем остальном.

Вы можете, конечно, настроить наведение и активные цвета по своему усмотрению.

Answer 2

Похоже, анимации не поддерживаются.Тем не менее, вы можете создать что-то вроде этого TriggeredAnimation компонента оболочки:

class TriggeredAnimationWrapper extends Component {
  constructor(...args) {
    super(...args)
    this.state = {
      wasClicked: false
    }
    this.triggerAnimation = this.triggerAnimation.bind(this)
  }

  triggerAnimation(callback) {
    return (...args) => {
      this.setState(
        {wasClicked: true}, 
        () => requestAnimationFrame(()=>this.setState({wasClicked: false}))
      )
      if (callback) return callback(...args)
    }
  }

  render() {
    const {
      triggerAnimation,
      props: {
        children
      },
      state: {
        wasClicked
      }
    } = this.props
    return children({wasClicked, triggerAnimation})
  }
}

И использовать его так:

<TriggeredAnimationWrapper>({wasClicked, triggerAnimation}) => (
  <Button 
    onClick={triggerAnimation((e) => console.log('clicked', e))}
    className={wasClicked ? 'clicked' : ''}
  />
)</TriggeredAnimationWrapper>

Затем вы можете создать анимацию CSS и изменить фонкогда класс щелчка присутствует.