Can't use global theme overrides for Button disabled
Nobody has claimed this yet.
- 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:
- Open https://codesandbox.io/s/globalthemeoverride-material-demo-forked-dpvi1?file=/demo.tsx
- 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
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.
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