材质UI改变输入浮动标签的颜色

Question

我想更改Material-UI文本字段的浮动标题的颜色.

如文档中所述,我将对象颜色传递为floatingLabelStyle:

<TextField floatingLabelStyle={{color: somecolor }} />

但是这适用于标签的两种状态 - 当它应该是灰色时,在输出和输入时悬停在焦点之外.

我想我正在覆盖某种CSS转换,但不知道如何让它工作.有什么建议？

Answer 1

这会打勾

  InputLabelProps={{
    style: { color: '#fff' },
  }}

Answer 2

您应该设置 InputLabel 的样式：

const styles = {
    floatingLabelFocusStyle: {
        color: "somecolor"
    }
}

<TextField
    label="Test"
    id="test"
    InputLabelProps={{
        className: classes.floatingLabelFocusStyle,
    }}
/>

Answer 3

您可以通过更改InputLabel内的颜色来做到这一点TextField。TextField提供了一个InputLabelPropsprop 来帮助您操作标签的属性。如果只想改变缩小（浮动）时的颜色，可以参考inputLabelClasses.shrink类名。请参阅下面的示例：

import TextField from "@mui/material/TextField";
import { inputLabelClasses } from "@mui/material/InputLabel";

<TextField
  label="Outlined secondary"
  InputLabelProps={{
    sx: {
      // set the color of the label when not shrinked
      color: "red",
      [`&.${inputLabelClasses.shrink}`]: {
        // set the color of the label when shrinked (usually when the TextField is focused)
        color: "orange"
      }
    }
  }}
/>

现场演示

Answer 4

这是一个错误，请向他们提出。

解释

刚刚浏览了他们的源代码。最初标签颜色设置为hintColor。

const styles = {
  ...
  floatingLabel: {
    color: hintColor,
    pointerEvents: 'none',
  },
  ...
}

焦点对准时，标签的颜色更改focusColor为muiTheme

if (state.isFocused) {
  styles.floatingLabel.color = focusColor;
}

然后如果给定任何值则覆盖

<TextFieldLabel
  style={Object.assign(styles.floatingLabel, this.props.floatingLabelStyle)}
  ...
>

所以你的属性总是被覆盖，因此你总是看到相同的颜色。