Change InputLabel color of a Select component when clicked/focused

混江龙づ霸主 提交于 2019-12-11 05:18:26

问题


If you look at the components here: https://material-ui.com/components/selects/, you'll see that when clicked, the label moves up and minimizes but also changes color (along with the border / line at the bottom that defines the text).

I figured out how to change all the colors EXCEPT the text that minimizes when clicked or focused. If someone can please help me. It's driving me nuts

Bonus Points if you can explain how you got to this conclusion so I can learn how to do this myself as well.

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  inputLabel: {
    color: 'lightgray',
    focused: {
      color: 'orange'  // does not work
    }
  },
  select: {
    color: 'white',
    '&:before': {  // changes the bottom textbox border when not focused
      borderColor: 'red',
    },
    '&:after': {    // changes the bottom textbox border when clicked/focused.  thought it would be the same with input label
      borderColor: 'green',
    }
  }
}));

<FormControl className={classes.formControl}>
  <InputLabel
    className={classes.inputLabel}
  >Number of Lists</InputLabel>
  <Select
      className={classes.select}
      value={values.age}
      onChange={handleChange}
      inputProps={{
        name: 'age',
        id: 'age-simple',
      }}
  >
    <MenuItem value={1}>One</MenuItem>
    <MenuItem value={2}>Two</MenuItem>
  </Select>
</FormControl>

回答1:


You can achieve this with the following (assuming Material-UI v4 or later):

  inputLabel: {
    color: "lightgray",
    "&.Mui-focused": {
      color: "orange"
    }
  },

Here's the relevant documentation: https://material-ui.com/customization/components/#pseudo-classes

Prior to version 4 you would need something like:

// This is similar to Brad Ball's answer, but this nested syntax ensures proper specificity for the focused CSS.
  inputLabel: {
    color: "lightgray",
    "&$inputFocused": {
      color: "orange"
    }
  },
  inputFocused: {}

// then in the JSX:
  <InputLabel
    className={classes.inputLabel}
    classes={{ focused: classes.inputFocused }}
  >




回答2:


Here is the syntax for using focused:

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  inputLabel: {
    color: "lightgray"
  },
  inputFocused: {
    color: "orange" // does not work
  },
  select: {
    color: "white",
    "&:before": {
      // changes the bottom textbox border when not focused
      borderColor: "red"
    },
    "&:after": {
      // changes the bottom textbox border when clicked/focused.  thought it would be the same with input label
      borderColor: "green"
    }
  }
}));

<FormControl className={classes.formControl}>
  <InputLabel
    className={classes.inputLabel}
    classes={{ focused: classes.inputFocused }}
  >
    Number of Lists
  </InputLabel>
  <Select
    className={classes.select}
    value={values.age}
    onChange={handleChange}
    inputProps={{
      name: "age",
      id: "age-simple"
    }}
  >
    <MenuItem value={1}>One</MenuItem>
    <MenuItem value={2}>Two</MenuItem>
  </Select>
</FormControl>;


来源:https://stackoverflow.com/questions/56639689/change-inputlabel-color-of-a-select-component-when-clicked-focused

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!