#javascript #reactjs #material-ui
#javascript #reactjs #материал-пользовательский интерфейс
Вопрос:
Это трудно выразить словами, но я хочу иметь возможность добавлять два набора значков в компонент ящика. Набор 1 идет сверху, выровненный по стандартному столбцу, точно так же, как в приведенных ими примерах. Набор 2 идет в нижней части ящика, оставляя пустое пространство между обоими наборами, оставаясь отзывчивым.
Вот примерный пример, в котором xxx представляет пробел.
Значок 1
Значок 2
Значок 3
ХХХ
ХХХ
ХХХ
ХХХ
ХХХ
ХХХ
Значок 4
Значок 5
Выполнимо ли это, оставаясь отзывчивым и избегая пользовательских правил CSS для полей и отступов? Спасибо всем!
Ответ №1:
Я не думаю, что это вообще возможно без какого-либо CSS. Документация Material-UI для ящика активно использует CSS-in-JS для оформления также базовых примеров.
Но я не думаю, что вам нужно писать много CSS для достижения этого вертикального разрыва между группами значков. Я полагаю, что вы можете достичь того, чего хотите, используя flexbox и позволяя первой группе значков увеличиваться до полного доступного вертикального пространства путем настройки flexGrow: 1 ?
Смотрите Этот CodeSandbox для демонстрации