mui / mui/material-ui

Can't use global theme overrides for Button disabled

Open
#29,644 9 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

breaking change has workaround scope: button type: bug
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Current behavior 😯

When using global style overrides to target the "disabled" css slot on a Button like so:

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        disabled: {
          fontSize: "55rem"
        }
      }
    }
  }
});

The global style override does not apply.

Expected behavior 🤔

Any styles contained in MuiButton.styleOverrides.disabled should be applied to a .MuiButton-root.Mui-disabled.

Steps to reproduce 🕹

Steps:

  1. Open https://codesandbox.io/s/globalthemeoverride-material-demo-forked-dpvi1?file=/demo.tsx
  2. Observe output: the font size should be gigantic (55 rem), but is clearly the default font size, meaning the override failed
Context 🔦

No response

Your environment 🌎
`npx @mui/envinfo`
 System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 8.35 GB / 12.43 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Managers:
    Apt: 2.0.6 - /usr/bin/apt
  Utilities:
    Git: 2.25.1 - /usr/bin/git
  IDEs:
    Nano: 4.8 - /usr/bin/nano
    VSCode: 1.62.2 - /home/ian/.vscode-server/bin/3a6960b964327f0e3882ce18fcebd07ed191b316/bin/code
    Vim: 8.1 - /usr/bin/vim
  Languages:
    Bash: 5.0.17 - /usr/bin/bash
    Perl: 5.30.0 - /usr/bin/perl
    Python3: 3.8.10 - /usr/bin/python3

(I use Chrome)

Contributor guide

Open the contributing guide

First steps

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

Research direction

Start by reproducing the issue in the linked CodeSandbox and inspect the MuiButton handling for global style overrides and its disabled CSS slot. Confirm the expected .MuiButton-root.Mui-disabled selector behavior, then add a regression test if the existing Button test structure provides one. Done means the 55rem override is applied to the disabled Button.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
design, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.