更改顏色 InputLabel Material UI

Question

我有以下輸入標簽：

<InputLabel>NAME</InputLabel>

我的問題是文本是白色的（我不明白為什么是白色的，也許我做錯了什么），而且我看不到白色的白色。 如何將顏色更改為黑色？

Answer 1

你可以給<InputLabel />一個類名：

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

Answer 2

使用withStyles和classes屬性。 查看用類覆蓋部分和組件的實現以獲取更多詳細信息。

在此處閱讀 InputLabel的 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 。

請參閱文檔本身中的自定義輸入。

Answer 3

這對我有用

 <TextField label="This is a label" InputLabelProps={{ className: classes.formLabel }} /> formLabel: { color: '#000, '&.Mui-focused': { color: '#000 } }

Answer 4

這是怎么回事？ 尋找答案后，它很簡單

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

Answer 5

您可以為下面的標簽指定style ，如下所示；

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

要么

在 CSS 中為InputLabel添加以下內容並嘗試：

InputLabel{  
  color: black;
}

Answer 6

反應.js？

嘗試使用

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

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

在獲得正確的解決方法之前，我在這方面遇到了許多變化

Answer 8

請試試這個：

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