Использование разделителей внутри вкладок Material-UI

Question

Если я хочу использовать разделитель или что-то еще, что не является вкладкой внутри вкладок Material-UI, я получаю предупреждения DOM в консоли.

<Tabs ...>
  //...
  <Divider />
  //...
</Tabs>

Временное решение для этого - создать Класс среднего класса, подобный этому:

<Tabs ...>
   //...
   <MDivider />
   //...
</Tabs>

function MDivider(props) {
  return <Divider />;
}

Но я подумал, является ли это лучшим решением для решения проблемы или есть другие, более эффективные способы прекратить получать предупреждение.

Коды и коробка с ошибкой здесь
Коды и коробка с исправлением здесь

Answer 1

Хорошо, так что я думаю, что нашел лучшее решение, основанное на том, как должны использоваться вкладки MUI. Если вкладки предназначены только для того, чтобы иметь дочерние вкладки MUI внутри, то для этого MUI-способом можно было бы добавить разделитель следующим образом:

<Tab label="" icon={<Divider />} disabled />

, присвоить ему className и стилизовать его соответствующим образом. Компонент Tab - это кнопка с содержимым внутри, поэтому вам нужно переопределить некоторые отступы и минимальные высоты в css.