Javascript 更改颜色InputLabel材质UI

我有以下输入标签：

<InputLabel>NAME</InputLabel>

名称

---

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

您可以为下面的标签指定

样式，如下所示

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

react.js

试用

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

const divStyle={
颜色：“蓝色”，
};
名称
您可以给
一个类名：

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


如果您试图通过
组件设置
样式

您可以通过访问
InputLabelProps为
提供一个类：

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

将
与样式
和
类
属性一起使用。有关更多详细信息，请查看部分和

阅读的API

创建所需的样式


constyles=theme=>({
cssLabel：{
颜色：'蓝色'，//所需颜色
},
)}
当输入标签处于焦点时，它的颜色不一定保持不变，并且会被默认值覆盖。我解决这个问题并使字体颜色保持不变的方法是在typescript中执行以下操作：

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

constyles=（主题：主题）=>createStyles({
格式文本：{
颜色：theme.palette.secondary.ContractText，
“&$formLabelFocused”：{color:theme.palete.secondary.ContractText}
},
formLabelFocused：{
}
})
类示例扩展了React.Component{
公共渲染（）{
通货
例子
}
}

在找到正确的解决方法之前，我在这方面遇到了很多变化，请尝试以下方法：

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

const divStyle={
颜色：“蓝色”，
};
名称
这对我很有效



formLabel：{
颜色：'#000，
"梅艳芳":{
颜色：'#000
}
}
怎么了？在寻找答案后，答案非常简单

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



在Chrome浏览器中，右键单击“InputLabel”元素并执行“Inspect”，然后查看为该InputLabel映射的“styles”，也就是说，这将忽略后续规则并应用此规则
InputLabel{color:black！important；
}通过一个TextField组件进行样式设置，这很有帮助。谢谢
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>
    }
}

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

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