Customization

By now, you should have a solid understanding of the customization options available for all components. This section provides even more flexibility, enabling you to style components globally, eliminating the need to duplicate code across your application.

All components share at least two common props: FormLabel and FormHelperText. Components like checkboxes or switches also include a FormControlLabel. These can be preconfigured to apply uniform styles across all components.

Additionally, there's an option to customize the dateAdapter for date and time pickers, with AdapterDayjs set as the default, following MUI's recommendation.

Starting with version 2, a new boolean flag, allLabelsAboveFields, also has been introduced to simplify label placement across form components. When set to true, this flag ensures that labels are rendered above all form fields globally, eliminating the need to manually specify showLabelAboveFormField prop for each component. If allLabelsAboveFields is enabled globally, you can explicitly set showLabelAboveFormField to false for a specific component to override the default behavior.

ConfigProvider

To streamline customization, the library provides a ConfigProvider component and the default values in DefaultRHFMuiConfig object, allowing you to override or extend the default values for components globally.

You can either apply these customizations across all forms by initializing ConfigProvider at the root level of your application or use it within a specific form as a parent component.

The type definition for ConfigProvider is listed below -

type RHFMuiConfigInput = {
  defaultFormLabelSx?: SxProps;
  defaultFormControlLabelSx?: SxProps;
  defaultFormHelperTextSx?: SxProps;
  dateAdapter?: `AdapterDayjs` | `AdapterDateFns` | `AdapterLuxon` | `AdapterMoment`;
  allLabelsAboveFields?: boolean;
}

The values listed below represent the default sx styles applied to the FormLabel, FormControlLabel, and FormHelperText components.

Prop Name	Default Value
defaultFormLabelSx	{ marginBottom: "0.75rem" }
defaultFormControlLabelSx	{}
defaultFormHelperTextSx	{ marginTop: "0.25rem", marginLeft: 0 }

Usage

import { ConfigProvider, DefaultRHFMuiConfig } from '@nish1896/rhf-mui-components/config';

Override the default FormLabel and FormHelperText values by providing the desired values in defaultFormLabelSx and defaultFormHelperTextSx props which accepts all valid values in the sx prop.

Additionally you also need to specify a dateAdapter for date and time pickers using ConfigProvider component. For a full list of available date adapters, see the MUI date library options. Please do install the npm package of the corresponding date library.

<ConfigProvider
  defaultFormLabelSx={{ color: '#007bff' }}
  defaultFormControlLabelSx={{ color: '#ea3677', mr: '1rem' }}
  defaultFormHelperTextSx={{ mt: '0.75rem' }}
  dateAdapter={AdapterMoment}
  allLabelsAboveFields
>
  <form>
    {/* Form content */}
  </form>
</ConfigProvider>

For detailed usage of ConfigProvider and extending an existing component, refer to this example.