小编Rox*_*had的帖子

材质 UI - 自动完成样式

我正在尝试设置填充样式,以便将图标推送到 AutoComplete Material UI 组件中的最右侧,该组件当前被此样式覆盖:

.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"]

这是代码:

const useStyles = makeStyles(theme => ({
  inputRoot: {
    color: "blue",
    fontFamily: "Roboto Mono",
    backgroundColor: fade("#f2f2f2", 0.05),
    "& .MuiOutlinedInput-notchedOutline": {
      borderWidth: '2px',
      borderColor: "blue"
    },
    "&:hover .MuiOutlinedInput-notchedOutline": {
      borderWidth: "2px",
      borderColor: "blue"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderWidth: "2px",
      borderColor: "blue"
    }
  }
}));

const textStyles = makeStyles({
  formControlRoot: {
    fontFamily: "Roboto Mono",
    width: "50vw",
    color: "#ffffff",
    borderRadius: "7px",
    position: "relative",
    "& label.Mui-focused": {
      color: "blue"
    },
  },
  inputLabelRoot: {
    color: "#ffffff",
    fontFamily: "Roboto …
Run Code Online (Sandbox Code Playgroud)

autocomplete styling textfield reactjs material-ui

5
推荐指数
1
解决办法
1万
查看次数

标签 统计

autocomplete ×1

material-ui ×1

reactjs ×1

styling ×1

textfield ×1