ребят, а можно както упростить работу с медиа запросами в sc? чтобы не плодить из компонента в компонент @media (max-width: 700px) { background: palevioletred; } а сделать что-то вроде tablet = '@media (max-width: 700px)' ... tablet { }

ха, при том что в коде вообще произвольный словарик разрешён

ха, при том что в коде вообще произвольный словарик разрешён

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/InputBase/InputBase.d.ts#L46-L49

ребят, а можно както упростить работу с медиа запросами в sc? чтобы не плодить из компонента в компонент @media (max-width: 700px) { background: palevioletred; } а сделать что-то вроде tablet = '@media (max-width: 700px)' ... tablet { }

https://www.styled-components.com/docs/api#css

https://www.styled-components.com/docs/api#css

спасибо, про css я знаю и пользуюсь я вот нашел то, что искал:

Scss вот это круто с React-ом

Scss вот это круто с React-ом

тута троль завелся

В упор не понимаю пользы от стайлед компонентс конечно

Да не, я даже соглашусь

Хотя хз

тута троль завелся

Happy coding bro

подскажите пожалуйста, как передавать url background в style={{}} , если url из props

В упор не понимаю пользы от стайлед компонентс конечно

писать стили там же, где и объявлен компонент, с разными плюшками типа пропсов да и медиа квери так делать удобно же const Container = styled.div` color: #333; ${media.desktop`padding: 0 20px;`} ${media.tablet`padding: 0 10px;`} ${media.phone`padding: 0 5px;`} `

То же самое в scss - переменные, миксины

То же самое в scss - переменные, миксины

Для stylus был очень крутой плагин rupture, где медиа квери тоже крутые но scss это же история, где css отдельно

Лан, холивар ща начнется На вкус и цвет) я просто не научился им пользоваться, откровенно говоря

В упор не понимаю пользы от стайлед компонентс конечно

https://www.youtube.com/watch?v=eOBz3_mQwo8

https://www.youtube.com/watch?v=eOBz3_mQwo8

Продано, смотрим

https://www.youtube.com/watch?v=eOBz3_mQwo8

забавно, что это твое выступление ?

?

забавно, что это твое выступление ?

Он специально выступил, чтобы видосом кидаться :)

Он специально выступил, чтобы видосом кидаться :)

Ну вроде того, я изначально стараюсь отвечать на самые частозадаваемые вопросы же https://github.com/artalar/blog

item какой тип ?

В том, что data[item].reduce - это не функция.

итем json

item - это стринг ?

ибо так сделать data[item] выйдет только когда item - стринг

это первое что следует проверить, а второе .. это то, что на элементе который находится под ключом data[item] нету метода .reduce

.reduce если я не ошибаюсь есть только у array

но применить его можно на все что iterable, при помощи call, apply

вроде бы понимаю о чём речь

нука скажи что покажет console.log(typeof data[item])

Не путайте JSON и js Object

Не путайте JSON и js Object

да, это 2 разные вещи

нука скажи что покажет console.log(typeof data[item])

а можно я тебе в лс напишу?

а можно я тебе в лс напишу?

пиши

?

Ну вот момент, в который я остановился и забил на стайлед - это четыре состояния одного элемента. (4 цвета и т.д.) Писать бекграунд: цвет.красный ? : цвет.красный : цвет.зеленый ? цвет.зеленый : цвет.синий ? : цвет.синий : цвет.желтый Я чет утомился и посчитал себя слишком уставшим и глупым на тот момент, чтобы придумать что-то умнее, а в доке советов не увидел быстро Пошел и написал на scss Если в секунду мне объяснишь, что я делал не так, то буду рад)

Ну вот момент, в который я остановился и забил на стайлед - это четыре состояния одного элемента. (4 цвета и т.д.) Писать бекграунд: цвет.красный ? : цвет.красный : цвет.зеленый ? цвет.зеленый : цвет.синий ? : цвет.синий : цвет.желтый Я чет утомился и посчитал себя слишком уставшим и глупым на тот момент, чтобы придумать что-то умнее, а в доке советов не увидел быстро Пошел и написал на scss Если в секунду мне объяснишь, что я делал не так, то буду рад)

background: ${props => props.theme.colors[props.color]}

background: ${props => props.theme.colors[props.color]}

то есть рядом должен лежать ещё массив с цветами, которые мне нужны?

то есть рядом должен лежать ещё массив с цветами, которые мне нужны?

Не рядом, а в теме

ну или из пропсов, не важно

темы? это к стайледам относится или просто тема? (контекст и тд)

https://lmgtfy.com/?q=styled+components+theme+provider

ладно, пойду доку пошуршу

подскажите какой-нибудь современный "стильный" фреймворк для реакта, админку собрать чисто, ну, там кнопочки, галочки там всякие и т.п.

Antd

Semantic ui

Андрей, спасибо, ушёл разбирать ?

Добрый вечер. Использую react-router-dom, а в частности HashRouter. При переходе по <Link /> URL страницы меняется но контент не реагирует на это. Но стоит к примеру начать вводить в инпут строку как роутер отрабатывает. В чем может быть проблема?

redux используешь?

Да

оберни connect компонента, который не хочет реагировать, в withRouter. Обычно это ./page/XXX https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md#important-note

оберни connect компонента, который не хочет реагировать, в withRouter. Обычно это ./page/XXX https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md#important-note

Thx, Заработало. Получается все контейнеры нужно через withRouter экспортить?

все, которые зависят от роутинга

ERROR: S client not available

все, которые зависят от роутинга

Большое спасибо =) А то уже больше часа времени в пустую потрачено на гугл хэш роутера

час — это еще хорошо :)

Подкиньте хороший гайд по реакту (кроме официального и Пацианского)

И желательно текстовый

Подкиньте Пацианский гайд по реакту

ахах

Прочитал как пацанкий гайд по реакту вначале

Ну вот момент, в который я остановился и забил на стайлед - это четыре состояния одного элемента. (4 цвета и т.д.) Писать бекграунд: цвет.красный ? : цвет.красный : цвет.зеленый ? цвет.зеленый : цвет.синий ? : цвет.синий : цвет.желтый Я чет утомился и посчитал себя слишком уставшим и глупым на тот момент, чтобы придумать что-то умнее, а в доке советов не увидел быстро Пошел и написал на scss Если в секунду мне объяснишь, что я делал не так, то буду рад)

1) Экономишь на пустом месте не используя switch 2) Делаешь темы без конкретных значений

Или смотришь как это сделал стайл систем и делаешь похожее

Я так кнопки делал для юи кита, собирались из кучи всего подряд

А прокидываешь всего три пропсы

Тип, форма, размер

О, кто-то использует стайледсистем. Я думал я один такой извращенец

Я не использую, я гордо достал от туда пару реализаций и переделал под себя

А это совсем печально если я материал юай подкрутил к проекту?

Повторять за автором styled-system сильно не рекомендую)

Ето путь на дно

Говорю, переделывал под себя

Там да

Особенно вещи типа space

Где вот это все Mt mb mx my py px

Но типа вещи типа колор, в который ты можешь передавать ключ цвета из своей темы норм

Больше меня убивает это реализация флекс компонента в ребассе

я ужаснулся от хоков когда rebass заюзал)

Фича в том, что реакт-компоненты невозможно экстендить стайледом, в отличии от обычных стайлед-компонентов: всё, что начало передаваться через пропсы, будет передаваться исключительно через них Поэтому если вдруг началась параметризация в его духе, то стайледы фактически вышвыриваются куда то на окраину, а ты опять пробрасываешь пропсы через весь пролёт

Раз раз раз ето ребаз

<Flex flexDirection alignItems justifyContent flexWrap >... </Flex>