Theming: Checkbox indeterminate is not being treated the same as checked/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 overriding the indeterminate state's style, is not throwing the same warning/error message as disabled.
Example code:
MuiCheckbox: {
styleOverrides: {
root: {
'&.Mui-checked': {
// will tell me to use this instead
// color: 'rebeccapurple'
},
},
checked: {
// MUI will throw console error, telling devloppers to use '&.Mui-checked'
color: 'rebeccapurple'
},
indeterminate: {
color: 'rebeccapueple'
}
}
}
I am greeted with a message such as
MUI: The
MuiCheckboxcomponent increases the CSS specificity of thecheckedinternal state.
However, not for indeterminate?
Expected behavior 🤔
indeterminate should be treated the same as checked and disabled, hence should throw the same error message?
Example:
MUI: The
MuiCheckboxcomponent increases the CSS specificity of theindeterminateinternal state.
The expected behavior is that all of them should behave the same, if for some reason MUI team decided that indeterminate would be treated differently, then I believe you guys should revert the same steps you guys did on the checked and disabled... the theme should override them the same ways.
Steps to reproduce 🕹
See example in Current behavior section
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
System:
OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
CPU: (16) x64 Intel(R) Xeon(R) Silver 4108 CPU @ 1.80GHz
Memory: 2.12 GB / 15.33 GB
Container: Yes
Shell: 5.1.4 - /bin/bash
Binaries:
Node: 10.24.1 - ~/.config/nvm/versions/node/v10.24.1/bin/node
Yarn: 1.22.10 - ~/.config/nvm/versions/node/v10.24.1/bin/yarn
npm: 6.14.15 - ~/projects/gravity/ui-components/packages/ui-components/node_modules/.bin/npm
Managers:
Apt: 2.2.4 - /usr/bin/apt
Maven: 3.6.3 - /usr/bin/mvn
pip2: 20.3.4 - ~/.local/bin/pip2
pip3: 20.3.4 - /usr/bin/pip3
Utilities:
Make: 4.3 - /usr/bin/make
GCC: 10.3.0 - /usr/bin/gcc
Git: 2.30.2 - /usr/bin/git
Virtualization:
Docker: 20.10.7 - /usr/bin/docker
IDEs:
Nano: 5.4 - /usr/bin/nano
VSCode: 1.63.1 - /home/eto/.vscode-server/bin/fe719cd3e5825bf14e14182fddeb88ee8daf044f/bin/code
Vim: 8.2 - /usr/bin/vim
Languages:
Bash: 5.1.4 - /usr/bin/bash
Java: 1.8.0_312 - /usr/bin/javac
Perl: 5.32.1 - /usr/bin/perl
Python: 2.7.18 - /usr/bin/python
Python3: 3.9.5 - /usr/bin/python3
Browsers:
Chrome: 96.0.4664.45
Chromium: 96.0.4664.110
Firefox: 95.0.1
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 with the Checkbox theme override reproduction in the issue and compare how the checked, disabled, and indeterminate states are handled. Verify the behavior against the reported console warning, and consider the work complete when indeterminate produces the same appropriate warning as the other internal states.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 40/100