[TextField] Color prop accepts limited options
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 trying to set the Textfield color property to "primary.dark" or "secondary.light" it breaks the entire component. Currently it is only limited to one level deep in the theme palette like "primary" or "secondary" which is very limiting to like 4 colors.
Plus I cant find any other way to get the same requirement.
Expected behavior 🤔
The Textfield color property should accept values from more than one level deep in the theme palette.
Steps to reproduce 🕹
https://codesandbox.io/s/stoic-sea-y6jw63?file=/src/Demo.tsx
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
I am using chrome Version 99.0.4844.51
System:
OS: Windows 10 10.0.19042
Binaries:
Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 8.3.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.30)
npmPackages:
@emotion/react: ^11.8.1 => 11.8.1
@emotion/styled: ^11.8.1 => 11.8.1
@mui/base: 5.0.0-alpha.70
@mui/icons-material: ^5.4.4 => 5.4.4
@mui/material: ^5.4.4 => 5.4.4
@mui/private-theming: 5.4.4
@mui/styled-engine: 5.4.4
@mui/styles: ^5.4.4 => 5.4.4
@mui/system: 5.4.4
@mui/types: 7.1.2
@mui/utils: 5.4.4
@types/react: 17.0.39
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: 4.6.2
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 TextField color prop and reproduce the failure using the linked CodeSandbox, focusing on how values such as primary.dark and secondary.light are resolved from the theme palette. The payload names no repository file or test; done means nested palette values work without breaking the component.
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
- 42/100