I am using the AddressAutofill component from @mapbox/search-js-react and am using material ui for my input. When using them in conjunction

    <AddressAutofill
      accessToken={mapboxUiApiKey}
      onRetrieve={(x: AddressAutofillRetrieveResponse) =>
        setSelectedMapboxObject(x.features[0] ?? null)
      }
    >
      <TextField
        label="Address Search"
        variant="outlined"
        fullWidth
        margin="normal"
        value={addressInput}
        onChange={(e) => setAddressInput(e.target.value)}
      />
    </AddressAutofill>

I get a nasty alignment error

After several hours investigating why this is happening, I can see that mapbox generates a mapbox-address-autofill shadow root which imparts a css style of

* { box-sizing: border-box !important; }

on everything - including my MUI input!.

This is going to break MUI's internal calculation of input height and is just all-around bad practice and not being good to your users.

Worse, the solution to this is not straightforward since !important flags cannot be passed to style blocks in MUI. That's why you don't use !important on stuff with wide css specifiers!!!