Scenario 1

To customize the placeholder text in the TextField component, use the label property and adjust it with the labelClassName property. Alternatively, you can pass InputLabelProps with attributes like className, classes, or style for further customization.

Scenario 2

If you prefer not to use the label property, insert the placeholder text in the placeholder property of the TextField. Utilize InputProps to modify the class of the HTML input element generated.

Code Example

The code snippet provided below demonstrates both scenarios mentioned above. View the implementation on CodeSandbox here.

import React from 'react';
import TextField from 'material-ui/TextField';
import { withStyles } from 'material-ui/styles';
import withRoot from '../components/withRoot';

const styles = {
  'input-label': {
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    width: '100%',
    color: 'red'
  },

  'input': {
    '&::placeholder': {
      textOverflow: 'ellipsis !important',
      color: 'blue'
    }
  }
};

class Index extends React.Component {
  render() {
    return <div style={ {width: 150, margin: '0 auto'} }>
      {/* Using "label" and "labelClassName". */}
      <TextField
        fullWidth
        label='I am a really really long red TextField label'
        labelClassName={ this.props.classes['input-label'] } />

      {/* Using "label" and "InputLabelProps" with inline styles. */}
      <TextField
        fullWidth
        label='I am a really really long green TextField label'
        InputLabelProps={{
          style: {
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            width: '100%',
            color: 'green'
          } }} />

      {/* Using "placeholder" and "InputProps" with "classes". */}
      <TextField
        fullWidth
        margin='normal'
        placeholder='I am a really really long glue TextField label'
        InputProps={{ classes: {input: this.props.classes['input']} }} />
    </div>;
  }
}

export default withStyles(styles)(Index);

UPDATE

If you wish to globally change the placeholder behavior, refer to ninjaPixel's response for a comprehensive solution.

To customize the appearance of the input field in your application, you can directly style it at the top-level instead of creating a custom input component with specific styles (as recommended in other responses).

import { ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from "@material-ui/core/styles";

const customizedTheme = createMuiTheme({
overrides: {
  MuiInput: {
    input: {
      "&::placeholder": {
        color: "gray"
      },
      color: "white", // adjust the input color using this property
    }
  }
});

// Implement it like so
<ThemeProvider theme={customizedTheme}>
  <App />
</ThemeProvider>

To implement the placeholder style, you can use the code snippet below:

const customStyles = (theme: any) => createStyles({
inputStyle: {
    '&::placeholder': {
      fontStyle: 'italic',
    },
  },
});

<TextField
  margin="normal"
  variant="outlined"
  placeholder="Type your text here..."
  InputProps={{
    classes: { input: classes.inputStyle}
  }}
/>

Utilize InputLabelProps with TextField Component

<TextField
   InputLabelProps={{
      style: { fontColor: '#fff', otherStyles }, 
   }}
/>

After searching extensively, I have yet to find a satisfactory solution on how to access the internal input element directly. However, when it comes to targeting the placeholder element with JSS, I stumbled upon the answer within the source code of the Input component that makes up the TextField.

In essence, you can target the placeholder using standard CSS names enclosed in quotes:

'&::-webkit-input-placeholder': { color: 'blue' }

To give your input a stylish look, consider using the ::placeholder selector in your css code. This method can help enhance the appearance of your form elements.

::-webkit-input-placeholder { /* Styling for Chrome/Opera/Safari */
  color: purple;
}
::-moz-placeholder { /* Style for Firefox version 19 and above */
  color: purple;
}
:-ms-input-placeholder { /* Styling for Internet Explorer version 10 and above */
  color: purple;
}
:-moz-placeholder { /* Style for older versions of Firefox (18 and below) */
  color: purple;
}

If you want to customize the placeholder only and not the label above it when focused, follow these steps:

const customStyles = makeStyles(theme => ({
    placeholder: {
         color: 'rgba(0, 0, 0, 0.26)'
    }
}));

const CustomLoginForm = () => {
    const styles = customStyles();

    return (
         <TextField
              ...
              InputLabelProps={{
                   classes: {
                       root: styles.placeholder,
                   }
              }}
         />
    )
}

After trying multiple solutions, I finally found the one that worked for me using MUI 5 and sx-props instead of makestyles:

import React, { FC } from 'react';
import { TextField } from '@mui/material';

const searchStyle = {
  // additional styles here
};

const searchField: FC < Props > = () => {
 return ( 
 < TextField 
    sx = {
      searchStyle
    }
    placeholder = {
      "Search"
    }
    inputProps = {
      {
        sx: {
          '&::placeholder': {
            color: 'red',
            opacity: 1, // to prevent lighter color in Firefox
          },
        },
      }
    }
  />
  );
};

(Source: )

Whether you are using the outlined, filled, or standard options, it's important to note that the placeholder is actually the label and not the ::placeholder. For the latest MUI versions, you can utilize sx.

<TextField
    label="Username"
    variant="standard"
    sx={{ input: { color: "yellow" }, "label": {color: "blue"} }} 
/>

<TextField
        placeholder='Enter your search here...'
        inputProps={{
            style: {color: 'black'}
        }}
/>