Styling FormHelperText and FormErrorMessage
See original GitHub issueDescription
Im able to style the default values on most components, but for some reason no matter what I do with these FormHelperText and FormErrorMessage I cant change their default colour or the margin
Link to Reproduction
no link
Steps to reproduce
for example to trying to change the top margin and color
const hdTheme = extendTheme({ components:{ FormHelperText: { baseStyle:{ marginTop: '0', color: '#B04445', }, variants: { base:{ marginTop: '0', color: '#B04445', } }, defaultProps: { variant: 'base', }, }, } })
Chakra UI Version
1.6.5
Browser
chrome
Operating System
- macOS
- Windows
- Linux
Additional Information
No response
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
FormHelperText API - Material UI
API reference docs for the React FormHelperText component. Learn about the props, CSS, ... Override or extend the styles applied to the component....
Read more >Form Control
FormHelperText : The message that tells users more details about the form section. FormErrorMessage : The message that shows up when an error...
Read more >FormControl - Hope UI
import { FormControl, FormLabel, FormErrorMessage, FormHelperText, } ... FormControl base styles and default props can be overridden in the Hope UI theme ...
Read more >How to override FormHelperText styles in React Material-UI?
The solution is here: <TextField name='username' label='Username' className={classes.textField} error={this.state.
Read more >Implementing Advanced Component Library using Chakra UI
Extending a foundation theme style; Extending a component theme style ... FormErrorMessage, FormLabel, FormHelperText, FormControlProps, ...
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
This isn’t a bug in Chakra. This should have been a discussion or a request on the Discord server channel SOS-need-help. The issue is with the way you are doing the theme. You should refer to the theme source for
Form
?There is a
Form
notFormHelperText
component. It’s a multi-part component with partscontainer
,requiredIndicator
andhelperText
.You can checkout my CodeSandbox for theme examples.
The default red color being non-compliant with accessibility standards could be addressed in an issue. Using
red.700
,#9B2C2C
, for light mode seems to make everything green on that WCAG site.