单击/聚焦时更改Select组件的InputLabel颜色 [英] Change InputLabel color of a Select component when clicked/focused

问题描述

如果您在此处查看组件: https://material-ui.com/components/选择/，您会看到单击该标签时，标签会向上移动并最小化，但颜色也会改变(以及定义文本底部的边框/线条).

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>

推荐答案

您可以通过以下方法(假设Material-UI v4或更高版本)来实现:

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

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

以下是相关文档: https://material-ui.com/customization /components/#pseudo-classes

在版本4之前，您需要以下内容:

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 }}
  >

这篇关于单击/聚焦时更改Select组件的InputLabel颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！