Каскад Mantine и UIKit

Оглавление · UIKit · Пример в приложении

Нужно знать: CSS-селекторы, media queries и разницу между темой и раскладкой. Результат: можете объяснить, почему локальная геометрия побеждает базовое оформление и где искать правило, изменившее вид компонента.

Задача: библиотека и локальная геометрия

Mantine задаёт оформление контролов; CSS Modules UIKit и приложения задают расположение, размеры и адаптивность составных блоков. Эти правила встречаются на одном элементе. Увеличение специфичности каждого селектора превращает поддержку в соревнование между стилями.

В корневом layout порядок такой:

import "@mantine/core/styles.layer.css";
import "@atmanki/ui/styles.css";
import "./index.css";

Mantine помещает базовые правила в слой mantine. Для обычных author-деклараций без !important правила без слоя имеют приоритет над правилами именованных слоёв: поэтому CSS Modules могут менять локальную геометрию без зависимости от порядка загрузки отдельных CSS-ресурсов Next.js.

Это не универсальное правило «последний импорт всегда побеждает». Каскад учитывает происхождение, важность, слои и затем специфичность/порядок. Для !important порядок приоритета слоёв обратный; здесь этот механизм не используется для исправления геометрии. Обычный inline style также может перекрыть обычный класс. Подробные правила — CSS Cascade Level 5.

Тема, класс и inline style

Задача	Где задаём
Палитра, шрифт, default radius и defaults контролов	`UiProvider` и тема
Ширина страницы, сетка, расположение и media queries	CSS Module рядом с составным компонентом
Специальный слот компонента Mantine	Штатный Styles API с учётом каскада

Не задавайте inline style props свойства, которые позже должны переключаться через media queries класса. Не обращайтесь к хешам внутренних классов Mantine: они не являются API. Не заменяйте styles.layer.css на обычный styles.css ради исправления одного компонента.

Как расследовать конфликт

В DevTools выберите элемент и нужное свойство в Computed/Styles.
Найдите выигравшую и перечёркнутые декларации: слой, inline style, важность, селектор, активную media query и файл.
Проверьте импорт слоёв в layout и границу ответственности темы/CSS Module.
Исправьте причину и проверьте узкий и широкий viewport, а также Storybook Docs.

Если страница стала шире viewport, найдите расширяющий её элемент. Одно лишь overflow-x: hidden маскирует причину и может скрыть содержимое. Историческое сравнение — пример диагностики на конкретную дату, а не проверка нынешнего состояния интерфейса.

Практика

В отдельной учебной ветке выберите адаптивный блок UIKit. Предскажите, какое правило задаёт расположение на двух ширинах. Подтвердите его в DevTools, покажите слой базового стиля и локальный класс. Затем изучите, что изменится при переносе того же свойства в inline style, и верните исходный вариант.

Проверка: объясняете выигравшее правило и сохраняете доступность содержимого; успешный typecheck сам по себе не проверяет CSS-каскад.