Material-UI如何更改输入框悬浮标签的颜色

Question

我想要改变 Material-UI 的 TextField 浮动标题的颜色。

根据文档，我将颜色对象作为 floatingLabelStyle 传递：

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

但这适用于标签的两种状态 - 悬停在输入框上以及不聚焦时在输入框上，此时标签应该是灰色的。

我想我正在覆盖某种CSS过渡效果，但不知道如何使其起作用。有什么建议吗？

- Łukasz Smoczyński

---

code or link perhaps? - Bruno Kos

<TextField floatingLabelStyle={{color: somecolor }} /> 这是我尝试的方法。 - Łukasz Smoczyński

Answer 1

这就行了

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

- Malte Schulze-Boeing

Answer 2

您应该设置InputLabel的样式：

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

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

- Borzh

Answer 3

您可以通过更改 TextField 内部的 InputLabel 的颜色来实现。 TextField 提供了 InputLabelProps 属性，以帮助您操作标签的属性。如果您只想在标签缩小（浮动）时更改颜色，则可以参考 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"
      }
    }
  }}
/>

实时演示

- NearHuscarl

Answer 4

如果您正在使用主题，我发现将以下内容添加到覆盖部分即可实现。

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

- Jody S

Answer 5

您应该使用floatingLabelFocusStyle：

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

<TextField floatingLabelFocusStyle={styles.floatingLabelFocusStyle} />

- JFAP

---

请注意：floatingLabelFocusStyle不再起作用。建议使用@Borzh中提到的InputLabelProps。 - iliak

Answer 6

您可以使用

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

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

- Fernando

Answer 7

对于使用v5 Material UI主题的用户：

MuiInputLabel: {
     styleOverrides: {
          root: {
               color: "white",
          },
          shrink: {
               color: "white",
          }
     }
}

这将为TextField中的InputLabel和浮动的InputLabel都设置样式。如果你只想改变浮动的InputLabel，那么移除根属性即可。

注意：你还需要为TextField添加布尔型属性shrink并将其设为true。

如需了解更多CSS规则名称，请查看MUI文档。

- BradleyIW

Answer 8

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

1. 使用makeStyle函数：

   沙盒链接：https://codesandbox.io/s/material-demo-xnz77

   说明：为了更加抽象化，我使用了style.js，在其中使用了JSS创建了通过makestyle函数创建的类。然后我使用了Input属性：

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

   从而创建了一个文本框，当它聚焦时改变标签颜色。

2. 使用withStyles：

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

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

   我没有使用参考中的完全相同的代码，但是我对其进行了一些修改以适应我的需求。

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

- kshitiz saini

---

最详细的回答！自动完成功能也适用吗？ - Raisa A

不确定它是否适用于自动完成，但是如果使用完美类，它肯定会起作用。请进一步解释，这样我就可以给出一个全面的答案。 - kshitiz saini

Answer 9

这是一个错误，请向他们报告。

解释

我刚刚查看了他们的源代码。最初标签颜色设置为hintColor。

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

当焦点在标签上时，标签的颜色从muiTheme变为focusColor

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

如果有任何值，则覆盖原值

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

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

- bigOmega ツ

Answer 10

您可以使用

import {FormControl, Input, InputLabel} from "@material-ui/core";

 <FormControl>
   <InputLabel style={{ color: '#fff' }}>Votre Nom et Prénom</InputLabel>
   <Input value={Nom} onChange={event => setNom(event.target.value)} />
 </FormControl>

- Omar Chakroun