"widget-loader-container" })`
width: 100%;
height: 100%;
padding: ${({ isSmallHeight }) => (isSmallHeight ? "9% 25px 10px" : "50% 25px 10px")};
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.loader {
position: unset;
transform: unset;
}
`;
const PositionMessageContainer = styled.div.attrs({ className: "widget-message-container" })`
width: 100%;
height: 100%;
padding: ${({ isSmallHeight }) => (isSmallHeight ? "10% 25px 10px" : "40% 25px 10px")};
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
получилось много дублирования. а не подскажете как дублирование убрать?
можешь общие стили через styled > css вынести по типу const sharedStyles = css` width: 100%; height: 100%; `; const A = styled('div')` ${sharedStyles}; color: red; `;
Ну либо общие стили установить, как тема и prop передавать, какая тема.
орно что стайледы не умеют это выносить в отдельный класс и везде дублируется
а я хз как оно это потом обрабатывает, не пользуюсь этим чудом
можн сдеелать так: ```` const Common = styled.div` width: 100%; height: 100%; ` const A = styled(Common)` ... ` const B = styled(Common` ... ```
Да, из того что использовал styled-components - наверно худшее. Хз как на этом чуде делать что-то больше чем todo....
Обсуждают сегодня