Question

我有以下输入标签：

<InputLabel>NAME</InputLabel>

我的问题是文本为白色（我不知道为什么是白色，也许我做错了什么），而我看不到白色的白色。如何将颜色更改为黑色？

Answer 1

使用withStyles和classes属性。请查看overriding with classes部分和implementation of the component以获得更多详细信息。

阅读InputLabel here的API。

创建必需的样式

const styles = theme => ({
 
  cssLabel: {
    color:'blue',//required color
    
  },
  
  )}

使用FormLabelClasses属性应用样式。

<InputLabel
          FormLabelClasses={{
            root: classes.cssLabel,
            focused: classes.cssFocused,
          }}
          htmlFor="custom-css-input"
        >
          Custom CSS
        </InputLabel>

别忘了导入withStyles。

在文档本身中引用Customised input。

CodeSandbox demo

Answer 2

您可以给<InputLabel />一个className：

<InputLabel classname="test-label">This is a label</InputLabel>

在样式表中：

.test-label: {
    color: #000000 !important;
}

如果您尝试通过<InputLabel />组件设置<TextField />的样式

您可以通过访问<InputLabel /> InputLabelProps给<TextField />一个类：

<TextField
   label="This is a label"
   InputLabelProps={{
     className: "test-label" 
   }}
/>

在样式表中：

.test-label: {
    color: #000000 !important;
}

Answer 3

您可以为以下标签提供style，如下所示：

 <InputLabel style="color:black;">NAME</InputLabel>

或

在CSS中为InputLabel添加以下内容，然后尝试：

InputLabel{  
  color: black;
}

Answer 4

react.js？

尝试使用

const divStyle = {
  color: 'blue',
};
<InputLabel style={divStyle} >NAME</InputLabel>

Answer 5

焦点对准时，输入标签的颜色不一定会保留，而是会被默认值覆盖。我解决此问题并保持字体颜色不变的方法是在打字稿中执行以下操作：

const styles = (theme: Theme) => createStyles({
    formText: {
        color: theme.palette.secondary.contrastText, 
        '&$formLabelFocused': {color: theme.palette.secondary.contrastText}
    },
    formLabelFocused: {
    }
})

class Example extends React.Component<>{
    public render() {
           <FormControl>
                    <InputLabel 
                        FormLabelClasses={{                        
                            root: classes.formText,
                            focused: classes.formLabelFocused
                        }}
                    >
                        Currency
                    </InputLabel>
          </FormControl>
          <Select>
                    <MenuItem key={1}>Example</MenuItem>
          </Select>
    }
}

在获得正确的解决方法之前，我为此进行了许多努力

Answer 6

请尝试以下操作：

const divStyle = {
  color: 'blue',
};
<InputLabel style={divStyle} >NAME</InputLabel>

Answer 7

这对我有用

<TextField
   label="This is a label"
   InputLabelProps={{
     className: classes.formLabel 
   }}
/>

  formLabel: {
    color: '#000,
    '&.Mui-focused': {
      color: '#000
    }
  }

Answer 8

怎么了？找到答案后就这么简单

<Box>
          <TextField
            onChange={handleChange("quantity")}
            label="$ Quantity"
            variant="filled"
            InputLabelProps={{
              style: { color: "cadetblue" }
            }}
          />
        </Box>

更改颜色InputLabel材质UI

8 个答案: