Quería eliminar el efecto dominó en el botón e implementar mi efecto personalizado en el botón MUI. Eliminé la ondulación usando disabledRipple . He intentado aplicar sombra cuando el usuario hace clic en un elemento, pero de alguna manera no funciona.
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> ); }He usado Mui-focusVisible para aplicar sombra al hacer clic como se menciona aquí es doc
deshabilitarRipple bool falso
Si es verdadero, el efecto dominó está deshabilitado. ⚠️ Sin ondulación no hay estilo para :focus-visible por defecto. Asegúrese de resaltar el elemento aplicando estilos separados con la clase .Mui-focusVisible.
Mi intención principal es lograr un efecto de clic igual que Ant Design. Verifique el botón aquí: https://ant.design/components/button/
Caja de arena: https://codesandbox.io/s/defaultprops-material-demo-forked-rhggn?file=/demo.js
¿Puede alguien ayudarme?
Aquí tienes... La magia sucede dentro del archivo style.css . Vea el fragmento bifurcado de CodeSandbox aquí .
Como quería que el código estuviera dentro de sx , moví el código del archivo style.css al archivo App.js y lo coloqué dentro de sx . Vea el fragmento de StackBlitz aquí .
Aplicación.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> ); }índice.js
import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render(<App />, document.getElementById("root"));índice.html
<div id="root"></div>estilo.css
// EmptyEs mucho más simple que eso... Simplemente llama a disabledRipple={true} y listo.