reactjs 禁用MUI按钮上的涟漪效果并添加自定义

yrdbyhpb 于 2022-11-29 发布在 React

关注(0)|答案(2)|浏览(182)

我想移除按钮上的涟漪效果，并在MUI按钮中实现我的自定义效果。我已经使用 disableRipple 移除了波纹。我尝试在用户单击元素时应用阴影，但不知何故，它不起作用。

import * as React from "react";
import Button from "@mui/material/Button";
import { alpha } from "@mui/material/styles";

export default function DefaultProps() {
  return (
    <Button
      variant="outlined"
      // className='Mui-focusVisible'
      disableRipple
      sx={{
        "&:hover": {
          boxShadow: `0px 0px 0px 0px ${alpha("#000", 0.16)}`
        },
        "&.Mui-focusVisible": {
          boxShadow: `0px 0px 0px 50px ${alpha("#000", 0.16)}`
        },
        "&.Mui-active": {
          boxShadow: `0px 0px 0px 8px ${alpha("#000", 0.16)}`
        }
      }}
    >
      Change default props
    </Button>
  );
}

我已经使用了Mui-focusVisible来应用单击时的阴影，这里提到的是doc
禁用Ripple布尔错误
如果为true，则禁用涟漪效果。如果️没有波纹，则默认情况下没有样式：focus-visible。请确保通过使用.Mui-focusVisible类应用单独的样式来突出显示元素。
我的主要目的是实现与Ant Design相同的单击效果。请检查此处的按钮：https://ant.design/components/button/
沙盒：https://codesandbox.io/s/defaultprops-material-demo-forked-rhggn?file=/demo.js
有人能帮我吗？

reactjs

来源：https://stackoverflow.com/questions/71061041/disable-ripple-effect-on-mui-button-and-add-custom

2条答案

按热度按时间

ncgqoxb01#

脉冲效应

神奇的事情发生在style.css文件中，参见分叉的CodeSandbox snippet。

编辑

由于您希望代码位于sx中，因此我将代码从style.css文件移动到App.js文件中，并将其放置在sx中。请参见StackBlitz snippet。

应用程序js

import React from 'react';
import Button from '@mui/material/Button';
import './style.css';

export default function App() {
  return (
    <Button
      variant="outlined"
      disableRipple
      sx={{
        borderRadius: '5px',

        '&::after': {
          content: '""',
          display: 'block',
          position: 'absolute',
          left: 0,
          top: 0,
          width: '100%',
          height: '100%',
          opacity: 0,
          transition: 'all 0.5s',
          boxShadow: '0 0 10px 10px rgba(0, 123, 255, 0.5)',
        },

        '&:active::after': {
          boxShadow: '0 0 0 0 rgba(0, 123, 255, 0.5)',
          position: 'absolute',
          borderRadius: '5px',
          left: 0,
          top: 0,
          opacity: 1,
          transition: '0s',
        },
      }}
    >
      Change default props
    </Button>
  );
}

索引.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

索引.html

<div id="root"></div>

样式.css

// Empty

赞(0）回复(0）举报 2022-11-29

cigdeys32#

比这简单多了...只需调用disableRipple={true}，就可以开始了。

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs 禁用MUI按钮上的涟漪效果并添加自定义

2条答案

脉冲效应

相关问题

热门标签

最新问答