Change color InputLabel Material UI

material-ui textfield label color
material-ui textfield label overlap
material-ui textfield color
material-ui input
material-ui select
material-ui inputprops
material-ui form
material-ui-phone-number

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?

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

InputLabel API, 'secondary', The color of the component. It supports those theme colors that make sense for this component. disableAnimation, bool, false, If true , the transition  The contents of the InputLabel. classes: object: Override or extend the styles applied to the component. See CSS API below for more details. color 'primary' | 'secondary' The color of the component. It supports those theme colors that make sense for this component. disableAnimation: bool: false: If true, the transition animation is disabled

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

FormLabel API, Versions · Blog · Edit this page color, 'primary' | 'secondary', The color of the component. It supports those theme colors that make sense for this component. Material-UI provides all colors from the Material Design guidelines. This color palette has been designed with colors that work harmoniously with each other. Hue" & "Shade: A single color within the palette is made up of a hue such as "red", and shade, such as "500". "red 50" is the lightest shade of red (pink!), while "red 900" is the darkest

react.js?

try use

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

[Need Help] Changing InputLabel on Focus · Issue #11137 · mui-org , using InputLabel with Select control and I'm able to override the color "​material-ui/styles"; import Input, { InputLabel } from "material-ui/Input"  color 'primary' | 'secondary' The color of the component. It supports those theme colors that make sense for this component. component: elementType 'label' The component used for the root node. Either a string to use a HTML element or a component. disabled: bool: If true, the label should be displayed in a disabled state. error: bool

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

mui-org/material-ui, MuiFormLabel Focused color problem #11244 I need to change color label when the input is focus, in beta 41 it is work. Your Environment. Tech, Version. Material-UI, beta 43+ .mui-input-label.focused { color: red; }. FormControlLabel API. The API documentation of the FormControlLabel React component. Learn more about the props and the CSS customization points.

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

Material UI Example, clone the redux-form repository, then cd redux-form to change to the repo directory, For Material UI, @erikras has published a set of wrapper components to use import InputLabel from '@material-ui/core/InputLabel' import FormHelperText name="favoriteColor" component={renderSelectField} label="​Favorite Color"  color 'primary' | 'secondary' 'primary' The color of the component. It supports those theme colors that make sense for this component. component: elementType 'div' The component used for the root node. Either a string to use a HTML element or a component. disabled: bool: false: If true, the label, input and helper text should be displayed in a

Prevent Material-UI InputLabel from moving to the upper left of , I couldn't find a really clean way, but the following seems to do the trick: <​InputLabel shrink={false}> {selected !== '' && 'Select item'}  👋 Thanks for using Material-UI! We use the issue tracker exclusively for bug reports and feature requests, however, this issue appears to be a support request or question. Please ask on StackOverflow where the community will do their best to help. There is a "material-ui" tag that you can use to tag your question.

Material Ui button colors not changed after theme change : reactjs, Material Ui button colors not changed after theme change. Needs Help import InputLabel from '@material-ui/core/InputLabel'; import LockIcon from  If the focused styles color had a specificity of one, it would be overriden when you change the non focused color. The prevent this problem, it has a specificity of two. The CSS specification used the same logic to define the pseudo classes specificity impact.

outlined-input - material-ui · Bit, Dependencies: clsx, prop-types, @material-ui/utils, react. Built with React. Use outlined-input by import InputLabel from "@bit/mui-org.material-ui.input-label";. Here we first imported the FormControl,InputLabel,Input,Button and TextField components from the material UI framework.. FormControlComponent: In FormControl component we passed margin prop value to normal so that it maintains the distance between input fields, we also passed fullWidth it means to occupy the available space.

Comments
  • Was styling through a TextField component, this helped. Thanks.
  • Does not work. Color of the label does not change.
  • In Chrome browser , Right click on the 'InputLabel' element and perform 'Inspect' and see the 'styles' mapped for that InputLabel
  • Also please try this, means, this will ignore subsequent rules and apply this rule!' InputLabel{ color: black !important; }