Change color InputLabel Material UI

user_1995049 0
Viewed 17895

I have the following input label:

<InputLabel>NAME</InputLabel>

My problem is that the text is in White (I don't get why is white, maybe I am doing something wrong), and I can't see white on white. How do I change the color to black?

material-ui reactjs javascript
8 Answers

You can give the <InputLabel /> a className:

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

In your stylesheet:

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

If you are trying to style the <InputLabel /> through a <TextField /> component

You can give the <InputLabel /> a class by accessing the <TextField /> InputLabelProps:

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

In your stylesheet:

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

Use withStyles and classes property. Have a look at overriding with classes section and the implementation of the component for more detail.

Read the API of InputLabel here.

Create a required styles 

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

Apply the styles using FormLabelClasses property.

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

Don't forget to import withStyles.

Refer Customised input in documentation itself.

user_86011850

This worked for me

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

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

user_67906220

What’s up? After looking for the answer it was as simple as

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

enter image description here

user_63445310

You can give the style for the below tag as follows;

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

or

Add the following for InputLabel in CSS and try:

InputLabel{  
  color: black;
}
user_48262150

react.js?

try use

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

The color of the input label doesn't necessarily remain when it's in focus, and will be overridden by the defaults. The way that I solved this and to get the font colour to remain the same was by doing the following in 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>
    }
}

I struggled with many variations on this before getting the right workaround

user_112934930

Please try this: 

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