[TextField] Improve CSS API error description

[kifirkin]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I'm overriding MuiBaseInput with

createMuiTheme({
  overrides: {
    MuiInputBase: {
      error: {
        ...

But styles for Mui-error class is missing

If I use withStyles and classes={{ error: classes.error }} everything is ok.

Expected Behavior 🤔

My styles applied for Mui-error class

Steps to Reproduce 🕹

Sandbox demo

Tech	Version
Material-UI	v4.9.1
React	react@16.12.0
Browser	Brave Version 1.2.43 Chromium: 79.0.3945.130 (Official Build) (64-bit)
TypeScript	3.7.3

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[kifirkin]

@oliviertassinari it's a bug, not a support issue or question...

[eps1lon]

@oliviertassinari it's a bug, not a support issue or question...

The console has valueable information about the cause of this issue.

[oliviertassinari]

It seems that we could fix the CSS API description:

diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
index d9ba76822..7718839cc 100644
--- a/packages/material-ui/src/FilledInput/FilledInput.js
+++ b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -97,7 +97,7 @@ export const styles = theme => {
     adornedEnd: {
       paddingRight: 12,
     },
-    /* Styles applied to the root element if `error={true}`. */
+    /* Pseudo-class applied to the root element if `error={true}`. */
     error: {},
     /* Styles applied to the `input` element if `margin="dense"`. */
     marginDense: {},
diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
index cf15942fc..5f9745533 100644
--- a/packages/material-ui/src/Input/Input.js
+++ b/packages/material-ui/src/Input/Input.js
@@ -78,7 +78,7 @@ export const styles = theme => {
         borderBottomStyle: 'dotted',
       },
     },
-    /* Styles applied to the root element if `error={true}`. */
+    /* Pseudo-class applied to the root element if `error={true}`. */
     error: {},
     /* Styles applied to the `input` element if `margin="dense"`. */
     marginDense: {},
diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index 955a57f42..827e98514 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -63,7 +63,7 @@ export const styles = theme => {
     adornedStart: {},
     /* Styles applied to the root element if `endAdornment` is provided. */
     adornedEnd: {},
-    /* Styles applied to the root element if `error={true}`. */
+    /* Pseudo-class applied to the root element if `error={true}`. */
     error: {},
     /* Styles applied to the `input` element if `margin="dense"`. */
     marginDense: {},
diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
index 9ef340a35..884c1117e 100644
--- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js
+++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
@@ -53,7 +53,7 @@ export const styles = theme => {
     adornedEnd: {
       paddingRight: 14,
     },
-    /* Styles applied to the root element if `error={true}`. */
+    /* Pseudo-class applied to the root element if `error={true}`. */
     error: {},
     /* Styles applied to the `input` element if `margin="dense"`. */
     marginDense: {},

[kifirkin]

@eps1lon thanks a lot for detailed explanation and sorry for perseverance 😅 !
@oliviertassinari anyway, what is the use case for error here? I'm a bit confused how to recognize when should I use $ruleName syntax...

[oliviertassinari]

@alexmironof You can find more details in https://material-ui.com/customization/components/#pseudo-classes.

[kifirkin]

@oliviertassinari thanks! got it

[TommyJackson85]

I will try and do it now.