mapbox-address-autofill component too aggressive with css injection in shadow root about mapbox.js HOT 1 OPEN

I'll also post the workaround for anyone else who is dealing with this. The trick is that you have to used styled components to properly place a css of box-sizing: content-box !important; on the input itself.

Doing this is a pain since - as was mentioned - you can't just use a style block. You also can't use a css prop as documented by eg emotion. I'm not 100% on why, but I assume that its because that autofill component does some sort of cloning thing and since this isn't a "standard" react property it is not picked up by the clone.

There a couple options I've found that work. From @emotion/react you cannot use any of the straightforward apis. However, you can use the ClassNames component with a render children prop to surround your TextField and the cx/css functions to create something that can go into inputProps={{className: cx(...)}}. This works but is super verbose and ugly.

The other option is to create a custom styled input component. You don't have to use emotion for this, but it works well

const ContentBoxInput = styled.input`
  box-sizing: content-box !important;
`

and then force the TextField to use that

      <TextField
        label="Address Search"
        variant="outlined"
        fullWidth
        margin="normal"
        value={addressInput}
        onChange={(e) => setAddressInput(e.target.value)}
        InputProps={{
          inputComponent: ContentBoxInput,
        }}
      />

note that it is important to use a TitleCase InputProps here, not the camelCase one

from mapbox.js.