Question

我正在使用自动完成组件，最后，我按需要完成了该功能，但是由于该组件作为小部件在其他页面中呈现，因此自呈现该组件的页面以来，我在样式方面遇到了一些奇怪的问题正在覆盖/添加他们在全局中拥有的样式。

这是我在本地的样子：

这是我部署它并在其中一个页面上对其进行检查时的外观：

我整整一天都在工作，但没有成功，但我发现使我的组件停滞不前的样式是：

我正在使用这些样式来隐藏文本框的轮廓样式

const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      border: 'none !important',
      outline: 'none'
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      border: 'none !important',
      outline: 'none'
    }
  }
}));

这就是我的自动填充组件的外观

<Autocomplete
          id="listings-filter"
          multiple
          disableCloseOnSelect={true}
          freeSolo
          clearOnBlur={false}
          limitTags={5}
          disableCloseOnSelect={true}
          blurOnSelect={false}
          options={options}
          groupBy={(option) => option.key }
          onInputChange={handleInputChange}
          onChange={handleOptionSelection}
          disableCloseOnSelect
          getOptionLabel={(option) => option.value}
          renderOption={(option, { selected }) => (
            <React.Fragment>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
              />
            {option.value}
            </React.Fragment>
          )}
          style={{ width: "100%" }}
          renderInput={(params) => (
            <TextField
              id='autocomplete-input'
              {...params}
              margin={'dense'}
              className={autocompleteClasses.root}
              InputLabelProps={{
                shrink: true
              }}
              variant='outlined'
              label="Search listings by address, MLS or property name"
              placeholder='Type the address, MLS or property name'
            />
          )}
        />

我试图在文本字段中添加inputProps并在其中提供样式，但这根本不起作用，还尝试在 makeStyles 部分中添加样式，但是我对如何获取感到困惑进入我需要使用MUI样式覆盖的确切类，并且由于它看起来与通用输入组件相关，而与实质性UI组件无关，这使我更加困惑。我不知道这是否可以通过react来实现，或者我必须构建一个CSS文件才能避免这种行为。非常感谢您的帮助！

编辑：还尝试使用 TextField 组件的inputProps，该组件依赖于另一个stackoverflow问题，但是当单击输入时出现以下错误-> Uncaught TypeError：无法读取属性'，会使自动完成组件崩溃。焦点”为空

const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      border: 'none !important',
      outline: 'none'
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      border: 'none !important',
      outline: 'none'
    }
  },
  input: {
    border: '10 !important',
    borderColor: 'red',
    boxShadow: 'unset !important',
    color: 'red'
  }
}));

renderInput={(params) => (
            <TextField
              id='autocomplete-input'
              {...params}
              margin={'dense'}
              className={autocompleteClasses.root}
              InputLabelProps={{
                ...params.InputLabelProps,
                shrink: true
              }}
              inputProps={{
                ...params.InputProps,
                classes:{
                  root: autocompleteClasses.input,
                }
              }}
              variant='outlined'
              label="Search listings by address, MLS or property name"
              placeholder='Type the address, MLS or property name'
            />
          )}

Answer 1

我通过创建一个scss文件解决了该问题：

.autocomplete-component > div > div > input {
  border: 0px !important;
  border-color: white !important;
  box-shadow: unset !important;
  -webkit-box-shadow: unset !important
}

并用作自动完成组件上的className：

import './listingStyles.scss'

<Autocomplete
          id="listings-filter"
          className={'autocomplete-component'}
          multiple
          disableCloseOnSelect={true}
          freeSolo
          clearOnBlur={false}
          limitTags={5}
          disableCloseOnSelect={true}
          blurOnSelect={false}
          options={options}
          groupBy={(option) => option.key }
          onInputChange={handleInputChange}
          onChange={handleOptionSelection}
          disableCloseOnSelect
... />

希望这对任何人都有用！

材质用户界面-小部件组件问题

1 个答案: