Override custom input style

To override or customized the styles, follow these steps:

Let us say you want to customize the CustomInputHorizontal component.(you can customize other custom input components as well by following the same steps).

You can override the styles in both the src/components/theme/userTheme.ts or src/components/theme/mergedTheme.ts file.

You may refer to the following code snippet:

MergedTheme.ts

src/components/theme/MergedTheme.ts

const MergedTheme = () => {
  const userTheme = {
    components: {
      MuiCustomInputHorizontal: {
        styleOverrides: {
          title : {
            color: '#fff',
            fontSize: '1.25rem',
          }
        }
      }
    }
  } as Theme

return deepmerge(coreTheme(), userTheme)
}

userTheme.ts

src/components/theme/userTheme.ts

const userTheme = (): Theme => {
  return {
    components: {
      MuiCustomInputHorizontal: {
        styleOverrides: {
          title : {
            color: '#fff',
            fontSize: '1.25rem',
          }
        }
      }
    }
  } as Theme
}

You have to add mergedTheme or userTheme in index.tsx file. You may refer to this on how to implement it.

That's it ! You have successfully customized the styles of CustomInputHorizontal component.🥳🎉