Is it possible to use the touch ripple effect of MUI on a div?

Question

I have read different answers of similar questions, but they are all old and don't seem to work in the latest version of MUI.

I need to apply the touch ripple effect on a div, but I can't use a button or a ButtonBase element because there is another button inside it.

Thanks in advance for the reply.

Answer 1

You Can Use ButtonBase API

With ButtonBase API you can pass component prop as div or any component you want

For Eg.

import { ButtonBase, Typography } from "@mui/material";

const App = () => {
  return (
    <ButtonBase component="div">
        <Typography fontSize="1.2rem">Hello, I'm a div with MUI Ripple Effect!</Typography>
    </ButtonBase>
  )
}

export default App;