CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Mike K
Mike K

Reputation: 6491

Focus property not working with styles, but before focus style works

I'm trying to change the font color of TextInput for material ui, but it's not working. It changes the font color when i click away, (it becomes white), but when i focus on the input again, it turns purple-ish (the default color that came with material ui when I downloaded it). Not sure what I'm doing wrong, any help would be much appreciated

styles:

  const useStyles = makeStyles(theme => ({
    "@global": {
      body: {
        backgroundColor: darkModeEnabled ? DARK_COLOR : WHITE,
        color: darkModeEnabled ? WHITE : DARK_COLOR
      }
    },
    input: {
      bottomBorder: "white",
      color: "white",
      "&:focus": {
        borderColor: "white"
      }
    },
    paper: {
      marginTop: theme.spacing(8),
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    },
    avatar: {
      margin: theme.spacing(1),
      backgroundColor: "#FFFFFF",
      color: RED
    },
    form: {
      width: "100%", // Fix IE 11 issue.
      marginTop: theme.spacing(1)
    },
    submit: {
      margin: theme.spacing(3, 0, 2)
    },
    darkModeColorInput: {
      color: WHITE
    },
    darkModeColorLabel: {
      color: "#212020",
      "&:after": {
        borderColor: "#212020"
      }
    }
  }));

Text input:

            <TextField
              margin="normal"
              InputLabelProps={{
                className: classes.darkModeColorLabel
              }}
              InputProps={{
                className: classes.input
              }}
              InputLabelProps={{
                className: classes.input
              }}
              required
              fullWidth
              id="usernameOrEmail"
              label="username or email"
              name="usernameOrEmail"
              value={usernameOrEmail}
              onChange={e => {
                if (usernameOrEmailEmpty) {
                  setUsernameOrEmailEmpty(false);
                }

                if (error) {
                  clearAuthError();
                }

                setUsernameOrEmail(e.target.value);
              }}
              autoComplete="off"
              autoFocus
              error={usernameOrEmailEmpty && "Field cannot be empty"}
            />

Upvotes: 2

Views: 1210

Answers (1)

Nithin Thampi
Nithin Thampi

Reputation: 3679

You might have to increase the specificity of the css to override a focused state in material UI. 

const getStyles = makeStyles(theme => ({
    focused: {
    },
    input: {
      borderBottom: "white",
      color: "white",
      "&$focused": {
        color: "green"
      }
    }
  }), { name: 'MuiTest' });

The most relevant parts are...

{ name: "MuiTest" } because class names should start with Mui for the above code to work.

"&$focused" - Rule name syntax to access local CSS style rules within the same stylesheet.

References:-

https://material-ui.com/customization/components/#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet

https://material-ui.com/styles/advanced/

I have created a reference implementation at the below playground.

https://stackblitz.com/edit/react-akba9p?file=index.js

Upvotes: 1

Related Questions