В документации по sizing указано Легко сделать элемент таким же широким или высоким ( относительно своего родителя) с утилитами ширины и высоты.
Я понимаю, что почти все примеры в системном разделе документации в основном относятся к компоненту Box. Я попробовал некоторые трюки оттуда на элементе Button. И ожидаемо ничего не изменилось.
Что ж, для тех, кто плохо знаком с материалом (на самом деле с пользовательским интерфейсом), это немного сложно. Во-первых, они используют Box, потому что согласно документации по Box они говорят, что Box создан с использованием стиля материала (не компоненты стиля) Компонент Box упаковывает все функции стиля, которые выставлены в @material-ui/system. Он создается с помощью функции styled() из @material-ui/core/styles.
Итак, я отправился на github и в основной репозиторий материалов, чтобы понять, как это сделать.
export const styleFunction = css(
compose(
borders,
display,
flexbox,
grid,
positions,
palette,
shadows,
sizing,
spacing,
typography,
),
);
css и compose также экспортируются из @material-ui/system
затем в конце файла;
const Box = styled(BoxRoot, { shouldForwardProp }, { muiName: 'MuiBox' })(styleFunction);
export default Box;
Используемый здесь styled взят из пакета experimentalStyled (внутреннего пакета), но это не имеет значения. Потому что ребята из Material экспортируют стилизованную функцию/хук для нашего использования.
import { styled } from "@material-ui/core/styles";
Я попробовал эту стилизованную функцию для компонента Button.
const CustomButton = styled(Button)(sizing);
и да, это сработало. Теперь я могу применять магические навыки стиля, определенные в разделе system пользовательского интерфейса материала.
Для тех, кто хочет использовать это вместо других методов. Я тоже отправил пакет npm.
