[Dropdown, Combobox, etc.] Ошибка гидрации в мобильном симуляторе

[kostaskriaridis]

Опишите ошибку
Ошибка при гидрации в мобильном симуляторе:

Warning: Expected server HTML to contain a matching <div> in <span>
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server

Чтобы воспроизвести
Шаги для воспроизведения поведения:

1. Склонировать репозиторий
2. Установить зависимости npm install
3. Запустить проект npm run dev
4. В инспекторе выбрать любой мобильный симулятор
5. Перезагрузить страницу
6. См. ошибку

Ожидаемое поведение
Гидрация происходит без ошибки

Скриншоты
Ошибка в мобильном симуляторе

Ошибки в десктопной версии нету

Укажите версию библиотеки и других пакетов:

• Версия @skbkontur/[email protected]

Параметры компьютера:

• ОС: Mac OS Big Sur 11.7
• Браузер: Google Chrome
• Версия: 116.0.5845.110

Дополнительный контекст
Ошибка происходит в связке с nextjs (см. репозиторий)

**Ошибка с выключенным mobileMediaQuery:
Если выключить mobileMediaQuery:

'use client';

import { THEME_2022, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';

const theme = ThemeFactory.create({ mobileMediaQuery: 'not all' }, THEME_2022);

export default function ThemeProvider({ children }: { children: JSX.Element }) {
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

То в мобильной версии происходит следующая ошибка:

Warning: Prop `className` did not match. Server: "react-ui-k7wtko" Client: "react-ui-1l1c0tc"

В заключение
Друзья, спасибо большое, что разрабатываете и поддерживаете эту замечательную библиотеку компонентов 🙏

[zhzz]

Спасибо за issue, разберемся с этим. А в каком проекте вы используете библиотеку?

[kostaskriaridis]

Спасибо за ответ :-)

Мы ещё не в продакшене, но хотим сделать агенство недвижимости.
Мы планируем переопределять цвета, отступы, шрифты и прочее 👍
Мы не планируем повторить интерфейсы СКБ Контур.

Это же не противоречит этому правилу?

Описанные здесь контролы и принципы можно использовать в своих работах. Не копируйте внешний вид элементов интерфейса — это часть нашего [фирменного стиля](https://kontur.ru/brandbook).

[zhzz]

Наши публичные библиотеки с указанной лицензией, такие как react-ui и react-ui-validations, можно использовать.

Покажите потом, что получится в результате 😉