StyledComponents оказалось лучшим решением, но только при использовании typescript'а благодря этому мы можем создавать интерфейс условно для контейнера { styles?: DefaultTheme } и передавая этот пропс с компонента иметь контроль над экспортируемыми стилями этого компонента и импортируемыми в частных случаях спасибо за ролик, здесь есть полезная инфа, но в на чистом js плюсы StyledComponents не так уж значительны в сравнении с SCSS было бы круто, если бы ты приводил в ролике пример на typescript и создание компонентов с внешней кастомизацией из файла с самим компонентом ВНЕШНИЙ КОМПОНЕНТ: export const InitScreen = () => { return ( ); }; const styles = { container: css` height: 100%; `, }; Ui КОМПОНЕНТ: type TContainer = "isCenter" | "isRowCenter" | "isRowBetween"; interface IContainer { containerType?: TContainer; styles?: DefaultTheme; } const CONTAINER_STYLES = { isCenter: css` justify-content: center; align-items: center; `, isRowCenter: css` flex-direction: row; align-items: center; `, isRowBetween: css` flex-direction: row; align-items: center; justify-content: space-between; `, }; export const Container = styled.div` display: flex; ${({ containerType = "isRowCenter", styles }: IContainer) => ` ${CONTAINER_STYLES[containerType]} ${styles} `} `;
А какая разница с typescript или на чистом js использовать styled-components? Тем что вместо 3 строк css пишешь isRowBetween и как бы реиспользуешь стили? 1) typescript в итоге все ровно компилиться в чистый js 2) написать 3 строчки css легче чем потом рассказывать всей команде, мы стили вот так теперь пишем.(все забудут про это так же, как забывают про миксины в scss когда проект разрастается) 3) typescript нужен как по мне вообще для другого. Так что я не вижу преимуществ использовать styled-components вместе с typescript, может ты мне объяснишь?
@@Illya.Landar я бы сказал, что вместо создания 3 классов под center, rowsAlign, rowsBetween мы создаем грубо говоря объект с ключами, там по объему строк разница незначительная, да и читабельность сохраняется зато получаем autocomplete при добавлении пропсов в компонент соответствующий интерфейсу и вот как бы основной плюс как раз в интерфейсах и типах, грубо говоря мой ui компонент зависит от значений из flux managment'a (в моем случае чат с голосовыми сообщениями, где много отрисовок от определенных данных) и чтоб не дублировать стили или не менять класс глобально или не создавать еще несколько классов, я назначение стилей выношу либо в константу, либо в хэлперы, где надо провести дополнительные проверки / операции с данными и в этом хэлпере сформировать стили по результатам расчета и благодаря ts я четко вижу какие значения тут я могу указать (+ они сами проставляются) и засчет этого мне не приходится в styled компоненте делать какие-то расчеты или проверки stylelint как бы дает контроль не допустить ошибку с px и pixels, но не дает возможности защиты от передачи неподходящих стилей в пропсы компонента p.s: да, можно сказать, что достаточно просто писать без ошибок и передавать правильные стили, но к сожалению это не всегда получается сделать (ну лично у меня) p.s.s: в любом случае, ts в комбинации со styled-components это очень сильно и в своих проектах это я точно использовать буду, а тебе спасибо за ролик, самое важное в styled-components ты очень доступно и классно объяснил, после чего мне было легче начать проектировать структуру проекта
не знаю, мне SCSS очень даже, styled--components - прикольно, не знал, помог... англ.яз - блин, подтяни, чувак !)) (unknown - читается "анноун", а не "юнноун") работаешь на публике - это важно ;) P.S. для новичков : "Линтер" - это инструмент для автоматической проверки кода на наличие потенциальных ошибок и нарушений стандартов написания кода."
вот как 2 года пишу только React Native приложения и привык уже к StyleSheet, сейчас в рамках перехода с CRA на vite > next снова вернулся на React под браузер и задумался как сейчас стили актуально писать. В целом, StyledComponents намного лучше SASS/SCSS, но немного неудобно, что для комфортного написания приходится столько зависимостей ставить и вот использование обратных ковычек `` вызывает боль, т.к воспринимаю это только как template strings. Были мысли использовать Tailwind CSS, но быстрее написать на StyleSheet
