Material UI - Widget component issue

Question

I'm using the autocomplete component, and finally, I finished the feature as I wanted but since this component is rendered in other pages as a widget I'm getting some weird issues with the styling since the page that renders my component is overriding/adding styles they have globally.

This is how it looks in my local:

And this is how it looks when I deploy it and I check it on one of the pages:

I've been working on this the whole day without success, but I found that the styles that are braking my component are these ones:

I'm using these styles to hide the outlined style of the textfield

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

And this is how my autocomplete components look like

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

I tried to add inputProps to the textfield and give the styles there but this didn't work at all, also tried adding the styles on the makeStyles part but I'm confused about how to get into the exact class I need with MUI style overrides, and since this looks that is related with generic input component and not with a material UI component, made me confuse even more. I don't know if this is possible with react or I have to build a CSS file to be able to avoid this behavior. Really appreciate any help!

EDIT: Also tried using the inputProps of the TextField component leaning on another stackoverflow question but that make the autocomplete component to crash when the input is clicked with the following error -> Uncaught TypeError: Cannot read property 'focus' of 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'
            />
          )}

Lorenzo Zuluaga Lorenzo Zuluaga · Accepted Answer · 2020-10-14T02:04:16

I solved the issue by creating a scss file:

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

and used as a className on the autocomplete component:

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

Hope this is useful for anyone!

Material UI - Widget component issue

1 Answers