MUI 更改 Select 的 Label 的 css 和选定选项的颜色答案

【问题标题】：MUI Change css of Label of Select and color of selected optionMUI 更改 Select 的 Label 的 css 和选定选项的颜色
【发布时间】：2020-02-06 17:25:58
【问题描述】：

几天来，我正在为 MUI 组件苦苦挣扎，在 React 应用程序中构建一个页面。

我差不多完成了，只是缺少两件事......

我在我的页面中使用 Select 和 Autocomplete。在他们两个我设置 {shrink=false} 到输入标签，但我不知道如何应用display:none 一旦选择了一个选项（就像不是缩小只是消失 - 现在它们相互重叠 - 我不知道为什么当shrink设置为false时默认情况下不是这样......）。

另外，在选择组件中，我需要 所选选项的颜色在输入文本内时为白色（而不是标签 - 现在，连同它... - 现在它是黑色的）。

有人可以帮助我吗？或者至少给我一个方向？

我正在浏览文档，但我无法找到方法。调用 handleChange 方法时我应该做些什么吗？ - 就是那个时刻……但是，如何改变他们的风格？

感谢任何可以提供帮助的人 xxx

【问题讨论】：

标签： javascript reactjs drop-down-menu autocomplete mui

【解决方案1】：

我使用状态解决了它：

const [selected, setSelected] = useState(false);

在<Select> 组件中：

onChange={(event) => {
  setSelected(true);
  handleChange(event);
}}

然后我将输入标签值设置为字符串或所选选项：

<InputLabel
  ref={inputLabel}
  className={classes.inputLabel}
  id="simple-select-label"
  shrink={false}
>
  {selected ? '' : 'Itinerario'}
</InputLabel>

希望能帮助到某人。 x

【讨论】：