Question

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

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

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

但是这适用于标签的两种状态 - 当它应该是灰色时，悬停在输入上方和输入上而不是焦点时。

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

Answer 1

你应该使用floatingLabelFocusStyle：

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

<TextField floatingLabelFocusStyle={styles.floatingLabelFocusStyle} />

Answer 2

您应该设置InputLabel的样式：

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

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

Answer 3

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

解释

刚刚浏览了他们的源代码。最初，标签颜色设置为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)}
  ...
>

因此，您的财产总是被覆盖，因此您总能看到相同的颜色。

Answer 4

这会打勾

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

Answer 5

如果您使用的是主题，我发现将其添加到替代部分即可

overrides: {
    MuiInputLabel: {
      root: {
        color: "rgba(255, 255, 255, 0.87)",
      },
    },
  },

Answer 6

有两种方法可以更改焦点事件上的标签颜色：

使用makeStyle函数：链接到沙盒：https://codesandbox.io/s/material-demo-xnz77 说明：为了使事情更抽象，我使用了style.js JSS使用makestyle函数创建类。之后，我已经使用输入道具：

InputLabelProps={{ classes: { root: classes.inputLabel, focused: "focused" } }}

并因此创建一个文本字段，该文本字段在聚焦时会更改标签颜色。
使用样式：

参考文献1：https://codesandbox.io/s/3vzr41zmjm

参考文献2：https://github.com/mui-org/material-ui/issues/13840

我没有使用参考文献中的确切代码，但是是的，我做了一些修改以满足我的要求。

这里是沙盒https://codesandbox.io/s/material-demo-s9g4t

Answer 7

你可以使用

root: {
  '& .MuiFormLabel-root.Mui-disabled': {
    color: 'red',
  },
},

 <TextField
   label={label}
   disabled={true}
   className={classes.root}
 />

Answer 8

这是一条改变颜色的css线


   reasons_for_make_good
0                   None
1                   None
10                  None
11                  None
12                  None
13                  None
14                  None
15                  None
16                  None
17                  None
18                  None
19                  None
2                   None
3                   None
4                   None
5                   None
6                   None
7                   None
8                   None
9                   None

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

8 个答案:

这是一条改变颜色的css线