Javascript 材料UI-小部件组件问题

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

这是我的本地产品的外观：

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

我在这方面工作了一整天都没有成功，但我发现阻碍我的组件的样式是：

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

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

option.key}
onInputChange={handleInputChange}
onChange={handleOptionSelection}
禁用关闭选择
getOptionLabel={（option）=>option.value}
渲染={（选项，{selected}）=>(
{option.value}
)}
样式={{width:“100%”}
renderInput={（参数）=>(
)}
/>

我尝试向文本字段添加inputProps并在那里提供样式，但这根本不起作用，还尝试在makeStyles部分添加样式，但我不知道如何使用MUI样式覆盖进入我需要的确切类，由于这种外观与通用输入组件相关，而不是与材质UI组件相关，这让我更加困惑。 我不知道react是否可以做到这一点，或者我必须构建一个CSS文件才能避免这种行为。非常感谢您的帮助

编辑： 还尝试使用TextField组件的inputProps，这依赖于另一个stackoverflow问题，但当点击输入时，会导致自动完成组件崩溃，出现以下错误->Uncaught TypeError:无法读取null的属性“focus”

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

const useStyles=makeStyles（主题=>({
根目录：{
“&.MuiOutlinedInput root.MuiOutlinedInput槽口双线”：{
边界：“没有！重要”，
大纲：“无”
},
“&.MuiOutlinedInput-root.Mui-focused.MuiOutlinedInput槽口双线”：{
边界：“没有！重要”，
大纲：“无”
}
},
输入：{
边界：“10！重要”，
边框颜色：“红色”，
boxShadow:“未设置！重要”，
颜色：“红色”
}
}));
renderInput={（参数）=>(
)}

我通过创建一个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
... />

import./listingStyles.scss'
option.key}
onInputChange={handleInputChange}
onChange={handleOptionSelection}
禁用关闭选择
... />

希望这对任何人都有用