MuiTouchRipple style overrides aren't applying

Open

#30,501 opened on Jan 5, 2022 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty: 3/5
Estimated time: 1-2 days
Newbie friendliness: 42/100

Issue type: Bug
Clarity: Mostly clear
Activity status: Stale
Tech stack: javascript, react
Domain: frontend

Research direction

Start with the linked CodeSandbox reproduction in src/Demo.tsx and run it to confirm that the MuiTouchRipple theme overrides do not affect the button ripple. Trace the MuiTouchRipple styles and rendered button behavior, then verify that the documented override produces the expected ripple colors in the sandbox.

Written by the indexing model from the issue text.

Description

scope: all components support: question type: expected behavior

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.

Dominant language: JavaScript
Stars: 99.1k
Forks: 32.5k
Avg merge: 2d 17h
Merged PRs (30d): 106

Contributor guide

Open the contributing guide

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.

Similar issues

[Duplicate Code] Repeated filtered model-alias assembly in proxy server Open

code-quality refactoring

Difficulty 2/5 1-3 hours Newbie friendliness 84/100

github/gh-aw-firewall#8816 · Opened Sep 20, 2026
quickjs: support `timeout=None` (no per-call deadline) in `CodeInterpreterMiddleware` Open

integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature

Difficulty 2/5 1-3 hours Newbie friendliness 74/100

langchain-ai/deepagents#6450 · Opened Sep 20, 2026
[optimization:agents-md-curator] AGENTS.md: compress duplicated Debugging & Logging section and merge redundant autopilot rules Open

optimization optimization:agents-md-curator

Difficulty 2/5 1-3 hours Newbie friendliness 86/100

githubnext/gh-aw-cao#13143 · Opened Sep 20, 2026
[BUG] schema-compat/zodToJsonSchema: nullable zod v4 enum/literal widens to type:[X,"null"] but keeps enum/const, so exported schema rejects null Open

status: needs triage

Difficulty 2/5 1-3 hours Newbie friendliness 88/100

mastra-ai/mastra#24516 · 2 comments · Opened Sep 20, 2026
Kubernetes request flow diagram 404s on both copies of the tutorial Open

Difficulty 2/5 1-3 hours Newbie friendliness 88/100

layer5io/docs#1263 · Opened Sep 20, 2026

More JavaScript issues