Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MuiTouchRipple style overrides aren't applying

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

With the following defined inside theme: `{ components: {

MuiTouchRipple: {
    styleOverrides: {
        childLeaving: {
            backgroundColor: '#ff9900',
            color: '#00ff00'
        },
        ripple: {
            backgroundColor: '#ff9900',
            color: '#00ff00'
        },
        ripplePulsate: {
            backgroundColor: '#ff9900',
            color: '#00ff00'
        },
        root: {
            backgroundColor: '#ff9900',
            color: '#00ff00'
        },
        rippleVisible: {
            backgroundColor: '#ff9900',
            color: '#00ff00'
        },
        child: {
            backgroundColor: '#ff9900',
            color: '#00ff00'
        },
        childPulsate: {
            backgroundColor: '#ff9900',
            color: '#00ff00'
        }
    }
}

I’m not seeing the ripple colour on buttons change and I odn’t see where the colors specifieid above apply to Muitouchripple on any level

Expected behavior 🤔

Colours defined in MuiTouchRipple override should apply to buttons.

Steps to reproduce 🕹

Steps:

Use style override as provided
Attempt to add a button and ckick it

View sandbox: https://codesandbox.io/s/material-ui-v5-theme-sandbox-forked-u228v?file=/src/Demo.tsx:0-1773

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Issue Analytics

State:
Created 2 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

4reactions

siriwatknpcommented, Jan 6, 2022

I suggest you use &:active + color on the Button. The TouchRipple’s background-color inherits color from the Button. Check this out: https://codesandbox.io/s/material-ui-v5-theme-sandbox-forked-uk0ns?file=/src/Demo.tsx

1reaction

eGenecommented, Mar 8, 2022

Created #31372.

Top Results From Across the Web

MuiTouchRipple style overrides aren't applying #30501

Colours defined in MuiTouchRipple override should apply to buttons. Steps to reproduce. Steps: Use style override as provided; Attempt to add ...

How to override MuiTouchRipple-root css - reactjs

To override MuiTouchRipple, you can use this approach. TouchRippleProps={{ classes: { child: 'my-class' }}}. Hope this will help.

TouchRipple API

Styles applied to the internal Ripple components childPulsate class. Have a look at overriding with classes section and the implementation of the component...

Customization of MUI Components and Theme - YouTube

How to Customize Material UI Components and ThemeIn this video, we have discussed the following points:- How to customize/ override material ...

Global Styling with Material-UI Theme Overrides and Props

In customizing a component, we can make a "brand" component - meaning a Material-UI component with a thin component wrapper, applying classes, ...