mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.76k stars 32.24k forks source link

No colorPrimary or success properties on OutlinedInputClasses #37545

Open julianCast opened 1 year ago

julianCast commented 1 year ago

If I want to get the MUI class of a success input element I have to code it via props in the logic, but I'd like to know if there is a similar way when, for example, we get the error class, or the colorSecondary. https://github.com/mui/material-ui/blob/a33eb7cba66a5c5631ba77c96d2fafaa12ed9f32/packages/mui-material/src/OutlinedInput/outlinedInputClasses.ts#L5-L9 We have colorSecondary or even error here https://github.com/mui/material-ui/blob/0d3aba1c9433dc5dd79dd9af6821c25b48d6f4f7/packages/mui-material-next/src/Input/inputClasses.ts#L14 I wonder why we don't have a colorPrimary or success

Example of use

For example, in a theme, we can custom set a color if the input has error state as follow:

[`&.${outlinedInputClasses.error}`]: {
   color: "red"
  }

But we can't set it if the input has success state because there is no outlinedInputClasses.success or outlinedInputClasses.colorPrimary

brijeshb42 commented 1 year ago

success state mainly depends on the context of the app. It could mean that if there is no error either when all the validation has passed. You could still use the color prop directly to style your success state when there is no error in your input.

julianCast commented 1 year ago

success state mainly depends on the context of the app. It could mean that if there is no error either when all the validation has passed. You could still use the color prop directly to style you success state when there is no error in your input.

It's true, but if inputs would allow to receive a prop like success, we would still be able to manage it while MUI applies the proper palette. I understand the paradigm of having two boolean could lead to a wrong use, but again that would rely on the developer. No sucess and no error => Stand by (as it is now when boolean error is false).

-- Another approach if success is too opinionated, would be colorPrimary as a property of OutlinedInputClasses so we could do :

[`&.${outlinedInputClasses.colorPrimary}`]: {
  border: "1px solid blue"
 }

Anyway, this is more a suggestion than an issue, so take it like that. Thanks!