Mui自动完成自定义主题中的true true true

Question

当使用Textfield时，我们可以添加一个自定义主题以使标签缩小默认

 MuiTextField: {
      defaultProps: { InputLabelProps: { shrink: true } },
 },

当使用

autocompletecomponent.时

 <Autocomplete
   fullWidth
   options={options}
   clearOnBlur
   disablePortal
   popupIcon={false}
   id="combo-box-demo"
   renderInput={params => {
      return (
       <TextField {...params} label="Movie" variant="standard" />
      );
   }}
  />

我尝试的是，我们可以在自动完成

renderInput

props

中添加它

renderInput={({ InputLabelProps, params })=> {
 return (
   <TextField {...params}
     label="Movie" variant="standard" 
     InputLabelProps={{
      shrink: true,
      ...InputLabelProps,
     }}
   />

 );
}}

但问题是我们每次要渲染自动完成时都需要通过它，并且很容易被遗忘。 如果我们还可以在自定义主题中默认，则很方便。

 MuiAutoComplete: {
      defaultProps: { InputLabelProps: { shrink: true } },
 },

这是可能的吗？

我认为您应该在默认道具中通过

shrink: true

inputlabel

本身，就像那样

Answer 1

我今天遇到了一个包含三个文本字段和一个按钮的UI的问题。执行搜索时，似乎“清除”按钮可以重置过滤器。但是，在清除过滤器后，文本字段中的占位符文本未返回其原始位置。

为了解决此问题，我创建了一个状态变量，以跟踪文本字段是否集中或具有值。最初，此变量设置为false：

，然后在文本字段组件中，我使用了以下代码：

Answer 2

这种确保占位持有人仅在集中或包含一个值时才能缩小来正确行为。