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.

Styling FormHelperText and FormErrorMessage

See original GitHub issue

Description

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 GitHub Comments

4reactions

primos63commented, Oct 8, 2021

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?

const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
  container: { width: "100%", position: "relative" },
  requiredIndicator: baseStyleRequiredIndicator(props),
  helperText: baseStyleHelperText(props),
})

There is a Form not FormHelperText component. It’s a multi-part component with parts container, requiredIndicator and helperText.

You can checkout my CodeSandbox for theme examples.

0reactions

primos63commented, Oct 12, 2021

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.

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....

Form Control

FormHelperText : The message that tells users more details about the form section. FormErrorMessage : The message that shows up when an error...

FormControl - Hope UI

import { FormControl, FormLabel, FormErrorMessage, FormHelperText, } ... FormControl base styles and default props can be overridden in the Hope UI theme ...

How to override FormHelperText styles in React Material-UI?

The solution is here: <TextField name='username' label='Username' className={classes.textField} error={this.state.

Implementing Advanced Component Library using Chakra UI

Extending a foundation theme style; Extending a component theme style ... FormErrorMessage, FormLabel, FormHelperText, FormControlProps, ...