Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
theme isn't applied to `FormControl` component
See original GitHub issueDescription
When I extend theme with FormControl component styles I expect styles to be applied but they are not
Link to Reproduction
https://codesandbox.io/s/angry-carlos-v6sqjm?file=/src/App.tsx
Steps to reproduce
- Extend theme with
FormControlstyles, i.e. addbaseStyleandvariant - Use
FormControlcomponent - See theme not being applied
Chakra UI Version
1.8.7
Browser
Version 100.0.4896.75 (Official Build) (64-bit)
Operating System
- macOS
- Windows
- Linux
Additional Information
Theme is defined in index.tsx file, component is used in App.tsx file.
Theme also not being applied to Input component and probably there’re others.
Issue might be related to #3884
Issue Analytics
- State:
- Created a year ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Style Chakra UI FormControl and label at application ...
This worked for me, but I get a TypeScript error with the Form line because it does not exist within ComponentStyleConfig . were...
Read more >Form Control
Chakra UI exports 4 components for Form Control: FormControl : The wrapper that provides context and functionality for all children.
Read more >Breaking changes in v5, part two: core components
This is a reference guide to all of the breaking changes introduced in Material v5, and how to handle them when migrating from...
Read more >Customize Theme
It is important to understand this so you can override any component style effectively. You're not limited to the component styles that Chakra...
Read more >Validation · Bootstrap v5.0
Due to constraints in how CSS works, we cannot (at present) apply styles to a <label> that comes before a form control in...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Let’s find out:
Open the docs for the Input component:
Click on “View theme source” and look for
baseStyle:https://github.com/chakra-ui/chakra-ui/blob/3e0a97185afda28edb47414db190916ea541bf57/packages/theme/src/components/input.ts#L9-L19
Notice the
fieldproperty => the Input component is a MultipartComponent.The theme key for “FormControl” is unfortunately “Form”. Kindly see this CodeSandbox.
I am using the “View theme source” very often when editing themes, to get to know the parts of a MultipartComponent.
Hope this helps, cheers 😃