material ui

Например:

Вообще для стилизации этой области можно использовать notchedOutline

НО: если у вас возникли проблемы с гранцей -- border-ом, который скажем имеет пробел (избыточное расстоние) до или после надписи (label), то проблема может быть просто в размере шрифта, наследуюемомго из .MuiOutlinedInput-root -- имеено этот размер наследуется для текста в legend.

Проблема

Для вложенных тем mui начинает добавлять числовые постфиксы для всех стандартных классов, как следствие стили вроде:

input: {
      background: isDarkTheme ? colors.grey50 : colors.primaryWhite,
      borderRadius: 4,
      '& .MuiOutlinedInput-root': {
        borderRadius: 4,
      },
      '& .MuiAutocomplete-input': {
        height: '1.1876em',
      },
    },

-- перестают работать.

Импортируем, как будет значение было экспортировано по умолчанию и затем применяем:

Используйте clsx, например

import clsx from 'clsx';

 const classes = useStyles();

<MyComp className={clsx(classes.icon, classes.checkedIcon)} />

Проблема возникает, если у вас на Select c опцией native был установлен атрибут value и label, но список опций подгружается не сразу (после первого вывода селктбокса) -- именно тогда опция, соответствующая value, накладывается на label

Возможное решение

Один из вариантов оперативного решения -- не показывать селект, пока вы не получите актуальный (напр. непустой) список options.

Речь о компоненте: https://material-ui.com/ru/api/select/

Ниже пример как с использованием пути к файлу, так и с непосредственных добавлением SVG в компонент:

Определим свой компонент:

Обратите внимание, что для набора пропосов:

id="call_to_action_selectbox"
value={props.entityData.call_to_action || ''}
onChange={handleButtonTextChange}
inputProps={{
  name: 'call_to_action',
  id: 'call_to_action',
}}

selectbox из материал ui построит такой html (в моем случае это было так), что id кликабельного блока (который и показывает выпадающий список) будет написан как:

select-call_to_action

Далее идея простая:

Вместо click() можно использовать clickWithLeftButton()
Например:

$I->clickWithLeftButton(['css' => '.checkout'], 20, 50);

-- для этой функции даже можно задать смещение относительно левого угла элемента.

Material UI (react)

В моем случае была проблема с псевдо-селекбоксом из material ui (click-ом выпадающий список не открывался).

Обновлено: click() в моем случае тоже подошел, просто нужно было проскроллить окно так, чтобы элемент был виден.