MaterialUI - 更改焦点上的颜色Textfield-Java 学习之路

我正在尝试更改Textfield中标签文本的颜色，但我似乎无法弄明白 .

这是我正在尝试的：

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

有人能给我一个关于我在这里做错的指针吗？

我也试过使用 MuiThemeProvider 但似乎无法想出那个：

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

如何更改标签的颜色？在这张照片中，我希望“注释”与下划线的颜色相匹配

谢谢你的帮助！
enter image description here

1 回答

蒂姆！这是应该帮助你的片段 .

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>

回复于 2024-04-16T18:14:49+08:00

MaterialUI - 更改焦点上的颜色Textfield

1 回答

相关问题