Material-UI.com 自动完成样式答案

【问题标题】：Material-UI.com AutoComplete STYLINGMaterial-UI.com 自动完成样式
【发布时间】：2021-04-15 16:28:58
【问题描述】：

我尝试了 CSS 的许多变体，但它似乎不允许我更改自动完成组件的轮廓颜色/边框颜色的“焦点”状态。提前感谢，因为我浪费了几个小时试图弄清楚如何改变颜色！我需要它是绿色而不是当前的蓝色。

const GreenAutocomplete = withStyles({
    root: {
        '&.MuiAutocomplete-popper': {
            outlineColor: '#68d0af',
            borderColor: '#68d0af',
        },
        '&.MuiAutocomplete-fullWidth': {
            outlineColor: '#68d0af',
            borderColor: '#68d0af',
        },
        '&.MuiAutocomplete-inputFocused': {
            outlineColor: '#68d0af',
            borderColor: '#68d0af',
        },
        '&.MuiAutocomplete-input:focus': {
            outlineColor: '#68d0af',
            borderColor: '#68d0af',
        },
        '&.Mui-focused': {
            outlineColor: '#68d0af',
            borderColor: '#68d0af',
        }
    },
})(Autocomplete);

const GreenTextField = withStyles({
    root: {
        '&.MuiAutocomplete-fullWidth': {
            outlineColor: '#68d0af',
            borderColor: '#68d0af',
        },
        '&.MuiAutocomplete-inputFocused': {
            outlineColor: '#68d0af',
            borderColor: '#68d0af',
        },
        '&.Mui-focused': {
            outlineColor: '#68d0af',
            borderColor: '#68d0af',
        }
    },
})(TextField);

 <GreenAutocomplete
      multiple
      id="tags-filled"
      options={suggestions.map((option) => option.name)}
      onChange={(e,v) => { 
          console.log('authocomplete -> e', e)
          console.log('authocomplete -> v', v) // This is an array
      }}
      // defaultValue={[top100Films[13].title]}
      fullWidth
      freeSolo
      renderTags={(value, getTagProps) =>
          value.map((option, index) => (
              <Chip variant="outlined" label={option} {...getTagProps({ index })} />
          ))
      }DateTextField
      DOBTextField
      renderInput={(params) => (
          <GreenTextField {...params} variant="outlined" placeholder="Tags" />
      )}
  />

【问题讨论】：

看看这个：*.com/a/49054353/12608714
我试过了，但错误消息指出我唯一可以覆盖的类是“root”。 @b3hr4d

标签： reactjs material-ui material-design

【解决方案1】：

我已经放弃并妥协了我的设计以获得更简单的答案。它没有勾勒出整个边框，但至少我可以坚持我的颜色。

const GreenAutocomplete = withStyles({
    root: {
        '& .MuiInput-underline:after': {
            borderColor: '#68d0af', // 1fa595
            borderWidth: '2px'
        },
        '& .MuiFilledInput-underline:after': {
            borderColor: '#68d0af', // 1fa595
            borderWidth: '2px'
        }
    },
})(Autocomplete);

const GreenTextField = withStyles({
    root: {
        '& .MuiInput-underline:after': {
            borderColor: '#68d0af', // 1fa595
            borderWidth: '2px'
        },
        '& .MuiFilledInput-underline:after': {
            borderColor: '#68d0af', // 1fa595
            borderWidth: '2px'
        }
    }
})(TextField);

<GreenAutocomplete
    multiple
    id="tags-filled"
    options={suggestions.map((option) => option.name)}
    onChange={(e,v) => { 
        console.log('authocomplete -> e', e)
        console.log('authocomplete -> v', v) // This is an array
    }}
    // defaultValue={[top100Films[13].title]}
    fullWidth
    freeSolo
    renderTags={(value, getTagProps) =>
        value.map((option, index) => (
            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
        ))
    }DateTextField
    DOBTextField
    renderInput={(params) => (
        <GreenTextField {...params} variant="filled" placeholder="Tags" />
    )}
/>

【讨论】：