CODEWITHSUNDEEP
reactjsmaterial-ui
sub_o
sub_o

Reputation: 2802

Change TextField font color in Material UI?

I'm currently using Material UI.

And I'm having issues trying to change the font color of the multiline TextField.

<TextField className = "textfield"
           fullWidth
           multiline
           label   = "Debugger"
           rows    = "10"
           margin  = "normal"/>

And the CSS:

.textfield {
    background-color: #000;
    color: green;
}

However, somehow I only get the black background and the font is still black. Does anyone know how to properly change the font color of a TextField using Material UI?

Upvotes: 57

Views: 163097

Answers (17)

Jakub Łobos
Jakub Łobos

Reputation: 81

const customTheme = createTheme({
  components: {
    MuiTextField: {
        defaultProps: {
          variant: "filled",
        },
        styleOverrides: {
          root: {
            input: {
              color: "#153243",
            },
          },
        },
      },
  },
});

Upvotes: 0

Abaid Ullah
Abaid Ullah

Reputation: 40

  <TextField
      required
      id="outlined-required"
      placeholder="Email"
      onChange={(e) => setEmail(e.target.value)}
      autoComplete={false}
      size="large"
      sx={{
        mb: "1rem",
        bgcolor: "rgb(51, 51, 51)",
        "& .MuiInputBase-root": {
          color: "white",
          "& > fieldset": {
            borderColor: "rgb(171, 171, 171)",
          },
          "&:hover fieldset": {
            borderColor: "white",
          },
          "&.Mui-focused fieldset": {
            borderColor: "white",
          },
        },
      }}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <EmailOutlined
              sx={{ color: "rgb(171, 171, 171)" }}
              fontSize="large"
            />
          </InputAdornment>
        ),
      }}
    />

Upvotes: 0

Devin McQueeney
Devin McQueeney

Reputation: 1287

None of these other approaches worked exactly for what I wanted to do which is have a dark themed one. This works for me with Material 5.x:

<TextField
    sx={{
      border: '1px solid rgba(255,255,255,.6)',
      borderRadius: 3,
    }}
    InputLabelProps={{
      style: { color: '#fff', backgroundColor: 'var(--green-80, #184743)' },
    }}
    InputProps={{ style: { color: '#fff' } }}
    id={id}
    label={label}
    variant="outlined"
    size="small"
  />

Upvotes: 1

Grace Em
Grace Em

Reputation: 21

I may be late to the party, but this is what I used to customise the color for all the text fields in my app. API here

const theme = createTheme({
  palette: {
    primary: {
      main: '#160033',
      contrastText: '#ffffff',
    },
    secondary: {
      main: '#BC12B4',
      contrastText: '#F7F5FF',
    },
  },
  components: {
    MuiTextField: {
      defaultProps: {
        color: "secondary",
        inputProps: {
          style: {
            color: "#160033" // This sets the text field font color
          }
        }
      }
    },
})

function App() {
  return (
    <ThemeProvider theme={theme} >
    // Your css baseline here...
    // Your routing component here...
    </ThemeProvider>
  )
}

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81330

In Material UI v5, you can just do this using sx prop:

<TextField sx={{ input: { color: 'red' } }} />

A bit longer approach if you want something more reusable:

const options = {
  shouldForwardProp: (prop) => prop !== 'fontColor',
};
const StyledTextField = styled(
  TextField,
  options,
)(({ fontColor }) => ({
  input: {
    color: fontColor,
  },
}));

<StyledTextField label="Outlined" fontColor="green" />
<StyledTextField label="Outlined" fontColor="purple" />

Live Demo

Codesandbox Demo

Upvotes: 52

James F. Thomas
James F. Thomas

Reputation: 109

I was able to take some of the examples - @Asif Mahmood @Karlo Tvrdinic @NearHuscarl - in this thread and apply them to the TextField component directly via to sx prop and utilize the theme object.

Here is an example from my project:

enter image description here

enter image description here

Upvotes: 1

Karlo Tvrdinic
Karlo Tvrdinic

Reputation: 29

As Mui documentation says you can create styled text field with these properties:

const CssTextField = styled(TextField)({
    '& label.Mui-focused': {
      color: 'white',
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: 'white',
    },
    '& .MuiInputLabel-root': {
      color: 'white',
    },
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'white',
      },
      '&:hover fieldset': {
        borderColor: 'white',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'white',
      },
    },
  });

and later you can use

<CssTextField label="*" name="*" variant="outlined" size="small" />

Upvotes: 1

mohit dave
mohit dave

Reputation: 11

if you are using styled component with TextField then just write this code inside your styled component:

  input: {
    color: '#ffffff',
  },

if you want to change placeholder color:

  label: {
    color: '#ffffff',
  },

Upvotes: 1

MD SHAYON
MD SHAYON

Reputation: 8055

This is working in my case:

import React from 'react';
import {  TextField, } from '@mui/material';
import { makeStyles } from "@mui/styles";


const useStyles = makeStyles((theme) => ({
    textfield_input: {
        color: `#c5cae9 !important`,
    }
}));

function Videoedit() {
  const classes = useStyles();
  return (<div>
            <TextField
              value={title}
              required
              label="Title"
              variant="filled"
              inputProps={{className: classes.textfield_input}}
              color="primary"
              focused
            />)
        </div>;
}

export default Videoedit;

Upvotes: 1

shiva
shiva

Reputation: 3941

I referred this page TextField API

And I override the TextField using Classes

const styles = theme => ({
    multilineColor:{
        color:'red'
    }
});

Apply the class to TextField using InputProps.

<TextField 
  className = "textfield"
  fullWidth
  multiline
  InputProps={{
    className: classes.multilineColor
  }}
  label   = "Debugger"
  rows    = "10"
  margin  = "normal" />

EDIT In older version you have to specify the key input

<TextField 
    className = "textfield"
    fullWidth
    multiline
    InputProps={{
        classes: {
            input: classes.multilineColor
        }
    }}
    label   = "Debugger"
    rows    = "10"
    margin  = "normal"
/>

Hope this will work.

Upvotes: 31

Douglas Caina
Douglas Caina

Reputation: 1256

If you are looking for a more generic fix, you can change your theme to contain that color, in my case I needed to change the input background and the disabled as well, so I end up using the ThemeProvider and a custom Theme.

Custom theme

const theme = createTheme({
  components: {
    MuiInputBase: {
      styleOverrides: {
        root: {
          backgroundColor: '#fff',
          '&.Mui-disabled': {
            backgroundColor: '#e4e4e4',
          },
        },
      },
    },
  },
});
const withDefaultTheme =
  <P extends object>(Component: React.ComponentType<P>) =>
  (props: any) =>
    (
      <ThemeProvider theme={theme}>
        <Component {...props} />
      </ThemeProvider>
    );

Upvotes: 3

Erik Nomitch
Erik Nomitch

Reputation: 1665

Using inputProps is correct, as others have posted. Here's a slightly simpler example:

<TextField
  multiline
  inputProps={{ style: { color: "red" } }}
  /* ... */
/>

Upvotes: 20

Teshell
Teshell

Reputation: 21

This should work !

import { TextField, makeStyles } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  input: {
    color: "#FFF",
  },
}));

const MyInput = () => {
  const classes = useStyles();

  return (
    <TextField
      inputProps={{ className: classes.input }}
      id="outlined-basic"
      label="Write something..."
      variant="outlined"
    />
  );
};

export default MyInput;

Upvotes: 2

Asif Mahmood
Asif Mahmood

Reputation: 63

//textfield customization
const CssTextField = withStyles({
  root: {
    '& .MuiInputBase-root': {
      color: 'white',
    },
  },
})(TextField);

Upvotes: 6

Mohammad Hasan kazemi
Mohammad Hasan kazemi

Reputation: 49

Use your Component like below

const MyTextField = withStyles({
root: {
"& .MuiInputBase-root.Mui-disabled": {
    color: "rgba(0, 0, 0,0.0)"
},
"& .MuiFormLabel-root.Mui-disabled": {
    color: "rgba(0, 0, 0,0.0)"
},

}
})(TextField);

Upvotes: -1

Hassan Abbas
Hassan Abbas

Reputation: 1316

How to set color property and background property of Text Field

import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = {
  root: {
    background: "black"
  },
  input: {
    color: "white"
  }
};

function CustomizedInputs(props) {
  const { classes } = props;

  return (
    <TextField
      defaultValue="color"
      className={classes.root}
      InputProps={{
        className: classes.input
      }}
    />
  );
}

CustomizedInputs.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CustomizedInputs);

Upvotes: 8

PPL
PPL

Reputation: 6555

Try below css 

 .textfield{
     color: #000;
    }

Upvotes: -12

Related Questions