Material UI - 小部件组件问题答案

【问题标题】：Material UI - Widget component issueMaterial UI - 小部件组件问题
【发布时间】：2021-01-28 08:04:22
【问题描述】：

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

这是它在我本地的样子：

这就是我部署它并在其中一个页面上检查它时的样子：

我一整天都没有成功，但我发现阻碍我的组件的样式是这些样式：

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

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: Cannot read property '焦点'的null

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'
            />
          )}

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

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

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

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

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
... />

希望这对任何人都有用！

【讨论】：