MuiTouchRipple style overrides aren't applying

[meds]

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:

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

or

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.

[siriwatknp]

TouchRipple is considered an internal component in v5. Can you share the use case where theming TouchRipple makes sense?

[meds]

TouchRipple is considered an internal component in v5. Can you share the use case where theming TouchRipple makes sense?

I'm themeing an app and want to use a custom ripple colour over components on mouse down.

[siriwatknp]

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

[danilo-leal]

@meds Could we close the issue? Has your problem been solved?

[eGene]

Maybe not the best place to ask this, but I was thinking to override ripple's colors to fix a11y contrast issues. Current mechanics of inheriting color and applying transparency makes many elements fail WCAG contrast requirements on focus. What is the official MUI's team position on this issue (couldn't find it anywhere)?

[hutber]

I've been struggling with this for a few hours.
It would be great to get some examples of how this would work. The issue is, I am unable to insect the ripple to know what the class names are to override them too. @siriwatknp thanks for the sandbox, however its working.

[danilo-leal]

@eGene I guess it would be great to talk about this matter in a different issue! Do you want to open it?

[eGene]

Created #31372.