更改颜色 InputLabel 材质 UI答案

【问题标题】：Change color InputLabel Material UI更改颜色 InputLabel 材质 UI
【发布时间】：2018-08-28 00:54:40
【问题描述】：

我有以下输入标签：

<InputLabel>NAME</InputLabel>

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

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

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

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

在您的样式表中：

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

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

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

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

在您的样式表中：

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

【讨论】：

通过 TextField 组件进行样式设置，这很有帮助。谢谢。

【解决方案2】：

这对我有用

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

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

【讨论】：

【解决方案3】：

使用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。

【讨论】：

【解决方案4】：

怎么了？寻找答案后很简单

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

【讨论】：

【解决方案5】：

react.js?

尝试使用

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

【讨论】：

【解决方案6】：

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

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

或

在 CSS 中为 InputLabel 添加以下内容并尝试：

InputLabel{  
  color: black;
}

【讨论】：

在 Chrome 浏览器中，右键单击“InputLabel”元素并执行“检查”并查看为该 InputLabel 映射的“样式”
也请尝试一下，意思是，这将忽略后续规则并应用此规则！' InputLabel{ color: black !important; }

【解决方案7】：

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

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>
    }
}

在找到正确的解决方法之前，我在这方面遇到了很多变化

【讨论】：

【解决方案8】：

请试试这个：

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

【讨论】：