如何始终将focusVisible样式应用到聚焦的材质-UI按钮组件上？

Question

对于Material-UI按钮组件，我希望“focus”样式看起来与“focusVisible”样式相同。意思是，我希望它有相同的涟漪效果，可见，如果按钮是以编程方式或鼠标聚焦，就像按钮是以tab键聚焦一样。

我找到的一种解决办法是在元素聚焦之前对其调用DispatchEvent（new window.event（“keydown”）)，从而使键盘成为最后使用的输入类型。这将产生使按钮看起来像我想要的那样的效果，直到onMouseLeave事件（来自MUI )或另一个鼠标事件被激发，导致可见焦点消失。

我已经想好了如何像这样更改组件的焦点样式：

import React from "react"
import { withStyles } from "@material-ui/core/styles"
import Button from "@material-ui/core/Button"

const styles = {
  root: {
    '&:focus': {
      border: "3px solid #000000"
    }
  }
}

const CustomButtonRaw = React.forwardRef((props, ref) => {
  const { classes, ...rest } = props
  return <Button classes={{root: classes.root}} {...rest} ref={ref}/>
}

const CustomButton = withStyles(styles, { name: "CustomButton" })(CustomButtonRaw)

export default CustomButton

所以，当按钮处于“焦点”状态时，我可以对它应用一些样式。（例如，我使用了边框）。但我不知道如何使样式应用。我试着把类名'mui-visiblefocus'放在按钮上，但似乎没有效果。如果按钮处于visibleFocus状态，是否有一些方法可以获得将被应用的样式？

Answer 1

ButtonBase(Button委托给它）有一个action prop，它提供了设置按钮焦点可见状态的功能。

ButtonBase为此利用了UseImpirativeHandle钩子。要利用它，您可以向action道具传递一个ref，然后您可以稍后调用actionRef.Current.FocusVisible（）。

但是，这本身是不够的，因为ButtonBase会监听几个鼠标和触摸事件来启动/停止纹波。如果您使用DisableTouchRipple道具，它将阻止ButtonBase尝试基于这些事件启动/停止ripple。

不幸的是，disabletouchripple会阻止按钮上的单击和触摸动画。可以通过显式添加另一个您控制的TouchRipple元素来恢复这些元素。下面的示例将onmousedown和onmouseup作为概念验证进行处理，但理想的解决方案将处理buttonbase处理的所有不同事件。

下面是一个工作示例：

import React from "react";
import Button from "@material-ui/core/Button";
import TouchRipple from "@material-ui/core/ButtonBase/TouchRipple";

const FocusRippleButton = React.forwardRef(function FocusRippleButton(
  { onFocus, onMouseDown, onMouseUp, children, ...other },
  ref
) {
  const actionRef = React.useRef();
  const rippleRef = React.useRef();
  const handleFocus = (event) => {
    actionRef.current.focusVisible();
    if (onFocus) {
      onFocus(event);
    }
  };
  const handleMouseUp = (event) => {
    rippleRef.current.stop(event);
    if (onMouseUp) {
      onMouseUp(event);
    }
  };
  const handleMouseDown = (event) => {
    rippleRef.current.start(event);
    if (onMouseDown) {
      onMouseDown(event);
    }
  };
  return (
    <Button
      ref={ref}
      action={actionRef}
      disableTouchRipple
      onFocus={handleFocus}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      {...other}
    >
      {children}
      <TouchRipple ref={rippleRef} />
    </Button>
  );
});
export default function App() {
  return (
    <div className="App">
      <FocusRippleButton variant="contained" color="primary">
        Button 1
      </FocusRippleButton>
      <br />
      <br />
      <FocusRippleButton
        variant="contained"
        color="primary"
        onFocus={() => console.log("Some extra onFocus functionality")}
      >
        Button 2
      </FocusRippleButton>
    </div>
  );
}