防止 Material-UI InputLabel 移动到 Select 组件的左上角

Posted 2023-02-22

【中文标题】防止 Material-UI InputLabel 移动到 Select 组件的左上角

【英文标题】：Prevent Material-UI InputLabel from moving to the upper left of Select component

【发布时间】：2020-01-03 05:59:20

【问题描述】：

无论我尝试什么，我似乎都无法为 Material-UI Select 组件获得真正的占位符功能。在<Select /> 上使用占位符道具不起作用，看起来它要么没有将该道具传递给输入，要么没有以某种方式显示它。

通读 Select 组件的 Material-UI 演示代码，他们似乎通过使用 <InputLabel /> 实现了占位符功能。他们有这个厚颜无耻的小动画，将其移动到输入的左上角。不错不错，效果不错。但它不符合我们网站的设计，我想禁用它。不幸的是，disableAnimation 属性只是导致标签跳到左上角，而不是完全消失。

我希望我的下拉组件将“选择项目”作为占位符文本说，然后当菜单打开时，该文本应该消失。仅当用户在未选择任何内容的情况下单击下拉菜单时才会返回。如果他们选择了一个值，则该值应替换占位符，并且“选择项目”不应出现在任何地方。

（注意：我在使用 react-select 时工作正常，但我需要使用 Material-UI 的涟漪效果，所以我尝试用 Material UI 覆盖他们的 MenuList 和 MenuItem 组件，但它会将所有道具传递给DOM 元素并抛出一堆错误。所以我回到绘图板并决定使用整个 Material UI Select 组件。）

当前代码：

const Dropdown = (options, ...props) => 
  const [selected, setSelected] = useState('');

  const testOptions = [
   value: 'chocolate', label: 'Chocolate' ,
   value: 'strawberry', label: 'Strawberry' ,
   value: 'vanilla', label: 'Vanilla' ,
];

  const handleChange = (selected) => 
    setSelected(selected);
    console.log('is anything happening')
  

  options = options || testOptions;

  const menuItems = options.map((option, index) => (
      <StyledMenuItem
        key=index
        value=option.value
        label=option.label
      />
    ));

  return (
    <FormControl hiddenLabel>
      <InputLabel disableAnimation>Select Item</InputLabel>
      <StyledSelect
        value=selected
        onChange=handleChange

        variant="outlined"
        disableUnderline=true
      >
        <MenuItem value="">
          <em>Select Item</em>
        </MenuItem>
        menuItems
      </StyledSelect>
    </FormControl>
  )
;


const StyledMenuItem = styled(MenuItem)`
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 20px;
  color: $colors.primary800;
  outline: none;

  &:hover 
    background-color: $colors.primary100;
  

  & .MuiTouchRipple-root 
    color: $colors.primary050;
  
`

const StyledSelect = styled(Select)`

  input::-webkit-contacts-auto-fill-button,
    input::-webkit-credentials-auto-fill-button 
        display: none !important;

    border: 1px solid $colors.primary400;
    border-radius: 2px;
    height: 40px;
    box-shadow: none;
    outline: none;

  & .MuiSelect-icon 
    fill: $colors.primary300;
    width: 36px;
    height: 36px;
    top: inherit;
  
`

【问题讨论】：

``` lang-js 选择项目 ``` 将 id 绑定到 htmlFor 应该可以解决收缩问题

【参考方案1】：

我找不到真正干净的方法，但以下方法似乎可以解决问题：

<InputLabel shrink=false>
    selected !== '' && 'Select item'
</InputLabel>

添加shrink=false 可确保标签在聚焦时不会向上移动。使用默认的 Material-UI 样式，选项将位于 InputLabel 上方，因此您在选择时不会看到它。 Then, when a value is selected the selected variable will be set and the text will hide from the label.

如果由于您的自定义样式而导致所选项目没有出现在 InputLabel 上，您可以使用 onFocus 和 onBlur 跟踪焦点以在选择焦点时隐藏标签内容。

【讨论】：

我正在做类似的事情，我正在使用你的方法。它适用于shrink=false，当我单击下拉菜单时标签不会移动。但是，它并没有消失，它仍然存在，并且选定的选项也是如此，它们都是可见的。这是我的代码：pastebin.com/caYK7r7U。你能帮我解决一下这里出了什么问题吗？

shrink=true on InputLabel 帮我解决了NativeSelect，最后一个是<InputLabel shrink=true>Select A Role</InputLabel>