material-components-web-react icon indicating copy to clipboard operation
material-components-web-react copied to clipboard

Ripple doesn't work without including `mdc-ripple-surface` classname

Open idrakimuhamad opened this issue 6 years ago • 3 comments

When I try to implement withRipple, the ripple doesn't get activated, nor the hover effect. However, if I append the class .mdc-ripple-surface, the ripple works as expected.

Reproduction in below link.

https://codesandbox.io/embed/exciting-shockley-q6qcr

Also, I find its necessary to merge the style from the HOC, with the component's style for it to work. Maybe this is the norm, so that's fine.

idrakimuhamad avatar Jul 09 '19 07:07 idrakimuhamad

@idrakimuhamad that is correct, as it is documented. I realize now that it is not obvious that you need to include style in your implementation, but it is covered if you include ...otherProps as described in the documentation.

moog16 avatar Jul 11 '19 16:07 moog16

@moog16 I'm sorry, I couldn't find in the doc about having to include .mdc-ripple-surface during initiation to make it work. Is it because I'm using CSS instead of SCSS? Don't think that'd be the case though.

Regarding the style, it make sense now as I see it. I'll amend mine to take the style out.

idrakimuhamad avatar Jul 12 '19 00:07 idrakimuhamad

Hi. I also can't find where it is documented. How does ...otherProps include that class? As far as I can tell the documentation example does not work as the icon component does not add the class.

emilmuller avatar Jan 09 '20 14:01 emilmuller