MaterialUI - 更改焦点上的颜色文本字段

Question

I'm trying to change the color of the label text in Textfield but I can't seem to figure it out.

Here is what I'm trying:

<TextField
    value={value}
    key={name}
    label={label}
    id={id}
    name={name}
    InputLabelProps={{
      shrink: true,
      FormLabelClasses: {
        'root': {
          '&:focused': {
            color: 'white'
          }
        },
        focused: 'true'
      }
    }}
  />

Can someone give me a pointer on what I'm doing wrong here?

I've also tried using the MuiThemeProvider but can't seem to figure that one out either:

const theme = createMuiTheme({
  overrides: {
    MuiFormLabel: {
      focused: true,
      root: {
        '&.focused': {
          color: 'white'
        }
      }
    }
  }
});

How can I change the color of the Label? In this photo, I want the "Notes" to match the color of the underline

Thanks for your help!

Answer 1

Tim! Here is the snippet that should help you.

 const { TextField, createMuiTheme, MuiThemeProvider, CssBaseline, } = window['material-ui']; const theme = createMuiTheme({ overrides: { MuiFormLabel: { root: { "&$focused": { color: "tomato", fontWeight: "bold" } }, focused: {} } } }); class Index extends React.Component { render() { return ( <MuiThemeProvider theme={theme}> <div> <CssBaseline /> <TextField label="Text field" InputLabelProps={{shrink:true}} /> </div> </MuiThemeProvider> ); } } ReactDOM.render(<Index />, document.getElementById('root'));

 <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script> <div id="root"></div>

Answer 2

Another way of doing it without the override is to have:

const textStyles = makeStyles({
  root: {
    "& .Mui-focused": {
      color: "tomato", 
      fontWeight: "bold"
    },
});

class Index extends React.Component {  
  const TextClass = textStyles()
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <div>
          <CssBaseline />
          <TextField className={textStyles.root} label="Text field" InputLabelProps={{shrink:true}} />
        </div>
      </MuiThemeProvider>
    );
  }
}

Answer 3

for v5 of @mui this code works

const theme = createTheme({
  components: {
    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontWeight: 'bold',
          "&.Mui-focused": {
            color: 'rgba(0, 0, 0, 0.87)',
          },
        },
      }
    },
    MuiTextField: {
      defaultProps: {
        variant: 'standard',
      },
    },
  },