CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Łukasz Smoczyński
Łukasz Smoczyński

Reputation: 351

Material-UI changing the color of inputs floating label

I want to change the color of a floating title for Material-UI's TextField.

As stated in documentation, I pass the object color as floatingLabelStyle:

<TextField floatingLabelStyle={{color: somecolor }} />

But this applies to both states of the label - hovering above the input and on the input while out of focus, when it's supposed to be grey.

I guess that I'm overwriting some kind of CSS transition, but have no idea how to make it work. Any suggestions?

Upvotes: 34

Views: 70632

Answers (12)

Malte Schulze-Boeing
Malte Schulze-Boeing

Reputation: 1145

This does the trick

  InputLabelProps={{
    style: { color: '#fff' },
  }}

Upvotes: 40

Aleksey
Aleksey

Reputation: 1

According v5 Material UI documentation examples https://mui.com/material-ui/react-text-field/#customization TextField colors can be customized with styled() utility

import { TextField } from '@mui/material';
import { styled } from '@mui/material/styles';

const CssTextField = styled(TextField)({
  '& label.Mui-focused': {
      color: 'green',
  },
  '& label.Mui-root': {
      color: 'blue',
  },
});

<CssTextField label="Custom CSS"/>

Upvotes: -2

BradleyIW
BradleyIW

Reputation: 1358

For those using themes with v5 Material UI:

MuiInputLabel: {
     styleOverrides: {
          root: {
               color: "white",
          },
          shrink: {
               color: "white",
          }
     }
}

This will style both the InputLabel inside a TextField and a floating InputLabel. If you just want to change the floating then remove the root attributes.

Note: You also need the boolean prop for TextField shrink to be true

For more CSS rule names check out the MUI documentation for this.

Upvotes: 1

Shubham Sharma
Shubham Sharma

Reputation: 1

Create a theme object and pass it to the mui component whose color you want to change

const theme = createTheme({
  palette: {
    primary: {
      main: "#f1d045",
    },
    secondary: {
      main: "#f1d045",
    },
  },
  textField: {
    color: "#f1d045",
  },
});

then pass this theme to the component you want to change by the help of ThemeProvider

<ThemeProvider theme = {theme}>
    <TextField
    id="outlined-search"
    label="Search field"
    type="search"
    />
</ThemeProvider>

while doing all this you get an error like 'ThemeProvider' is not defined react/jsx-no-undef

so to correct this you just have to import this in your jsx file

import {ThemeProvider, createTheme } from "@mui/material/styles";

Upvotes: 0

Omar Chakroun
Omar Chakroun

Reputation: 112

You can use

import {FormControl, Input, InputLabel} from "@material-ui/core";

 <FormControl>
   <InputLabel style={{ color: '#fff' }}>Votre Nom et Prénom</InputLabel>
   <Input value={Nom} onChange={event => setNom(event.target.value)} />
 </FormControl>

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81270

You can do that by changing the InputLabel's color inside the TextField. TextField provides a InputLabelProps prop to help you manipulate the label's properties. If you only want to change the color when it is shrinked (floating), you can refer to the inputLabelClasses.shrink class name. See the example below:

import TextField from "@mui/material/TextField";
import { inputLabelClasses } from "@mui/material/InputLabel";

<TextField
  label="Outlined secondary"
  InputLabelProps={{
    sx: {
      // set the color of the label when not shrinked
      color: "red",
      [`&.${inputLabelClasses.shrink}`]: {
        // set the color of the label when shrinked (usually when the TextField is focused)
        color: "orange"
      }
    }
  }}
/>

Live Demo

Edit 35781631/material-ui-changing-the-color-of-inputs-floating-label

Upvotes: 7

Fernando
Fernando

Reputation: 31

You can use

root: {
  '& .MuiFormLabel-root.Mui-disabled': {
    color: 'red',
  },
},

 <TextField
   label={label}
   disabled={true}
   className={classes.root}
 />

Upvotes: 3

k1941996
k1941996

Reputation: 183

There are two ways by which you can change the label color on focus event :

  1. Using makeStyle Function : Link to the sandbox : https://codesandbox.io/s/material-demo-xnz77 Explanation: To make things more abstract i have used style.js in which i have used JSS which creates classes using makestyle function. After that i have used Input props:

    InputLabelProps={{ classes: { root: classes.inputLabel, focused: "focused" } }}

    and thus creating an textfield which when focussed change the label color.

  2. Using withStyles :

    Reference 1: https://codesandbox.io/s/3vzr41zmjm

    Reference 2: https://github.com/mui-org/material-ui/issues/13840

    I havent used the exact code from the references but yes i have modified it a bit to fit my requirements.

    Here is a Link to sandBox https://codesandbox.io/s/material-demo-s9g4t

Upvotes: 1

Jody S
Jody S

Reputation: 73

If you're working from a theme, I found that adding this to the overrides section did it

overrides: {
    MuiInputLabel: {
      root: {
        color: "rgba(255, 255, 255, 0.87)",
      },
    },
  },

Upvotes: 5

Borzh
Borzh

Reputation: 5195

You should set style of InputLabel:

const styles = {
    floatingLabelFocusStyle: {
        color: "somecolor"
    }
}

<TextField
    label="Test"
    id="test"
    InputLabelProps={{
        className: classes.floatingLabelFocusStyle,
    }}
/>

Upvotes: 10

JFAP
JFAP

Reputation: 3717

You should use floatingLabelFocusStyle:

const styles = {
    floatingLabelFocusStyle: {
        color: "somecolor"
    }
}

<TextField floatingLabelFocusStyle={styles.floatingLabelFocusStyle} />

Upvotes: 3

bigOmega ツ
bigOmega ツ

Reputation: 371

This is a bug, please raise it with them.

Explanation

Just went through their source code. Initially the label color is set as hintColor.

const styles = {
  ...
  floatingLabel: {
    color: hintColor,
    pointerEvents: 'none',
  },
  ...
}

On focus, the color of the label is changed to focusColor from muiTheme

if (state.isFocused) {
  styles.floatingLabel.color = focusColor;
}

And then overridden if any value is given

<TextFieldLabel
  style={Object.assign(styles.floatingLabel, this.props.floatingLabelStyle)}
  ...
>

So your property is always overridden and thus you see the same color always.

Upvotes: 0

Related Questions