时间戳

首页 > 解决方案 > MUI 更改 Select 的 Label 的 css 和选定选项的颜色

javascript - MUI 更改 Select 的 Label 的 css 和选定选项的颜色

问题描述

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

我快完成了，只是缺少两件事......

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

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

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

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

感谢任何可以帮助xxx的人

标签： javascriptreactjsdrop-down-menuautocompletemui

解决方案

我使用状态解决了它：

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

推荐阅读