对于 Material-UI Button 组件,我希望 "focus" 样式看起来与 "focusVisible" 样式相同。也就是说,如果按钮通过程序或鼠标获取焦点,我希望它具有相同的涟漪效果。
我找到了一种解决方法,即在元素被聚焦之前调用
我已经找到了如何更改组件的焦点样式:
我找到了一种解决方法,即在元素被聚焦之前调用
dispatchEvent(new window.Event("keydown"))
,使键盘成为最后一个输入类型。这将产生所需的外观效果,直到 MUI <ButtonBase/> 的 onMouseLeave 事件或其他鼠标事件被触发,从而导致可见焦点消失。我已经找到了如何更改组件的焦点样式:
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
因此,当按钮处于“焦点”状态时,我可以为其应用一些样式(例如,我应用了一个边框)。但是我不知道如何获取要应用的样式。我尝试在按钮上放置className 'Mui-visibleFocus',但似乎没有效果。是否有某种方法可以获取如果按钮处于visibleFocus状态时将应用的样式?