CODEWITHSUNDEEP
reactjsmaterial-ui
Mike K
Mike K

Reputation: 6491

Overriding TextField color in MaterialUI

I'm trying to get the border color to change from that default purple to white.

Here's what I have so far:

    const useStyles = makeStyles(theme => ({
        darkModeColorInput: {
            color: WHITE
        },
        darkModeColorLabel: {
            color: WHITE,
            "&:after": {
                borderColor: WHITE
            }
        }
    }));

    <TextField
    margin="normal"
    inputProps={{
        className: classes.darkModeColorInput
    }}
    InputLabelProps={{
        className: classes.darkModeColorLabel
    }}
    required
    fullWidth
    id="email"
    label="handle or email"
    name="email"
    autoComplete="email"
    autoFocus
    color={WHITE}
    />

This renders:

img

The label also switches from white to that default purple on focus. What am I doing wrong here?

Upvotes: 0

Views: 627

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

The easiest way to do this is to use the dark theme through the ThemeProvider:

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

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

<ThemeProvider theme={darkTheme}>
   <Component />
</ThemeProvider>

Then, you will get a theme for all Material UI components that will show correctly on a dark background.

If you still want to fully control the look (and don't want to use a theme), you need to set custom styles for InputLabelProps and InputProps on your TextInput (https://material-ui.com/api/text-field/).

Upvotes: 4

Related Questions