更改颜色输入标签材料界面

你可以给我 <InputLabel />

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

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

< 通过 <TextField /> 成分

<输入标签/> <文本字段/> 输入标签属性:

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

在样式表中:

.测试标签:{
}

这对我有用

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

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

使用 withStyles classes overriding with classes 部分和 implementation of the component 更多细节。

阅读的API InputLabel here

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

使用应用样式 FormLabelClasses 财产。

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

风格

参考 Customised input

反应.js?

试用

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

你可以给我 style 以下标签如下:;

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

或

InputLabel

InputLabel{  
  color: black;
}

当输入标签处于焦点时,它的颜色不一定保持不变,并且将被默认值覆盖。我解决这个问题并使字体颜色保持不变的方法是在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>
    }
}

在得到正确的解决方法之前,我在这方面做了很多努力

请试试这个:

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

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