Estoy tratando de cambiar el efecto de color ondulado de un botón en Material UI 5. He probado muchas soluciones diferentes de Internet, pero ninguna de ellas parece funcionar. Este es mi componente:

 import React, { MouseEventHandler } from "react"; import { Button as MaterialButton } from "@mui/material"; import { styled } from "@mui/material/styles"; const StyledButton = styled(MaterialButton)({ boxShadow: "none", backgroundColor: "rgb(74, 144, 223)", padding: "10px 20px", border: "none", outline: "none", borderRadius: "5px", width: "150px", "&:hover": { backgroundColor: "rgb(83, 162, 255)", }, "&:disabled": { backgroundColor: "rgba(74, 144, 226, 0.5)", color: "white", }, }); type ButtonProps = { text: string; onClick: MouseEventHandler<HTMLButtonElement>; disabled: boolean; }; export const Button = (props: ButtonProps) => { const { text, onClick, disabled } = props; return ( <StyledButton disabled={disabled} variant="contained" onClick={onClick}> {text} </StyledButton> ); }; Button.defaultProps = { disabled: false, };

¿Alguna idea de cómo cambiarlo? En este momento, el efecto dominó se calcula en función de la propiedad del color , por lo que si lo cambio a red , tanto el efecto dominó como la fuente se mostrarán en color rojo. El problema es que quiero cambiar el color del efecto dominó sin modificar el color de la fuente.