Popper: стили CSS "margin" не могут использоваться для применения отступов между popper и его ссылочным элементом или границей. реагировать на бутстрап

Question

Я работаю над проектом реакции с использованием response-bootstrap и сталкиваюсь с этим предупреждением при нажатии на раскрывающееся меню.

Popper: стили CSS "margin" не могут использоваться для применения отступов между popper и его ссылочным элементом или границей. Чтобы воспроизвести маржу, используйте offset модификатор, а также padding вариант в preventOverflow и flip модификаторы.

<Dropdown alignRight className="dropdown m-0">
   <Dropdown.Toggle as={CustomToggle} />
   <Dropdown.Menu style={{ margin: 0 }}>
      <Dropdown.Item >edit</Dropdown.Item>
   </Dropdown.Menu>
</Dropdown>

Как я могу решить эту проблему?

Answer 1

При добавлении стиля с полем сообщение об ошибке исчезает Dropdown.Menu style={{ margin: 0 }}

Answer 2

Я наблюдал это сообщение об ошибке при использовании элемента управления автозаполнением MUI (который также использует Popper) при получении данных на стороне сервера.

Я изо всех сил пытаюсь определить, какая именно комбинация реквизитов вызывает предупреждение, но я знаю, что удаление устранило предупреждение. Это также, похоже, не влияет на мой вариант использования (в документации просто предлагается использоватьчтобы обойти проблему доступности на iOS).

Вот пример из моего кода:

      <Autocomplete
      inputValue={acInputValue}
      onInputChange={(e_, newValue, reason) => {
        setMode(reason);
        setAcInputValue(newValue);
      }}
      value={firstMatchingOption}
      onChange={(e_, selectedValue) => {
        onChange({
          target: {
            name,
            value: selectedValue,
          },
        });
      }}
      // disablePortal // removing this stops the warning
      options={options}
      filterOptions={(x) => x} // for server-side filtering
      getOptionLabel={lookupLabel}
      // use mongo ids because my labels are not unique
      renderOption={(props, id) => (
        <li {...props} key={id}>
          {lookupLabel(id)}
        </li>
      )}
      renderInput={(params) => (
        <TextField {...params} label={isProgressing ? 'loading...' : label} />
      )}
    />