@react_js
Bogdan17.09.2018
09:23:49
09:23:49
Roman17.09.2018
09:23:54
09:23:54
или ты в целом спрашиваешь использование?
Andrey17.09.2018
09:24:18
09:24:18
ну ты там можешь обычный цсс писать. scss это же надмножество
в стайледах ты тоже пишешь обычный цсс если хочешь)
GoogleAndrey17.09.2018
09:24:21
09:24:21
ток в джс файле
Roman17.09.2018
09:25:28
09:25:28
SC диктует компонентный подход, чтобы у тебя не было портянки из дивов
Bogdan17.09.2018
09:26:36
09:26:36
Bogdan17.09.2018
09:27:21
09:27:21
Artyom17.09.2018
09:28:06
09:28:06
что тебе мешает сделать див компонентом и ипортнуть туда нужный для него цсс?
И многие так делают? С хорошим инструментом не удобно писать плохой код и удобно хороший
Vadim17.09.2018
09:28:10
09:28:10
что тебе мешает сделать див компонентом и ипортнуть туда нужный для него цсс?
опять же, вручную нужно создавать классы. В стайлед этого не надо делать
Dmitry17.09.2018
09:29:41
09:29:41
что тебе мешает сделать див компонентом и ипортнуть туда нужный для него цсс?
немного неудобно делать два файла, придумывать названия классовArtyom17.09.2018
09:30:18
09:30:18
Я бы сказал даже "много неудобно"
Vadim17.09.2018
09:31:02
09:31:02
Vlad17.09.2018
09:31:05
09:31:05
мне не хватает аргументов, чтобы этот пункт в споре выиграть
Если много динамики в стилях, писать на классах - отврат. Делать инлайн - неконсистентно. Начинается каша, если на проекте не один человек)
На SC выходит красиво. Но в остальных случаев я больше воевал с ним.Bogdan17.09.2018
09:32:25
09:32:25
Если много динамики в стилях, писать на классах - отврат. Делать инлайн - неконсистентно. Начинается каша, если на проекте не один человек)
На SC выходит красиво. Но в остальных случаев я больше воевал с ним.
если реально много динамики то инлайны придется все равно писатьRoman17.09.2018
09:32:33
09:32:33
GoogleVadim17.09.2018
09:33:02
09:33:02
о боги
Vlad17.09.2018
09:33:53
09:33:53
если реально много динамики то инлайны придется все равно писать
Так в sc ты вроде одной функцией делаешь стили инлайновыми. А описываешь их точно так же.Artyom17.09.2018
09:34:36
09:34:36
Так в sc ты вроде одной функцией делаешь стили инлайновыми. А описываешь их точно так же.
Не инлайновыми. Но можно и инлайнить через attrsBogdan17.09.2018
09:35:19
09:35:19
ну и препроцессинг в рантайме
Vlad17.09.2018
09:37:39
09:37:39
Не инлайновыми. Но можно и инлайнить через attrs
И правда, не могу найти в доке. Но где-то я слышал же) Вроде даже в твоем докладе. Если стили очень часто меняются на каком-то компоненте, можно их в инлайн вынести
что-то в таком духеDmitry17.09.2018
09:37:55
09:37:55
Мне больше emotion нравится с вот такими фишками https://emotion.sh/docs/cx
Roman17.09.2018
09:39:19
09:39:19
Artyom17.09.2018
09:39:21
09:39:21
Andrey17.09.2018
09:40:11
09:40:11
Мне больше emotion нравится с вот такими фишками https://emotion.sh/docs/cx
classnames на максималках?Vlad17.09.2018
09:40:41
09:40:41
Как выяснилось, styled-components стили не могут быть экстрагированы в статический
CSS файл (например используя extract-text-webpack-plugin). Это значит, что браузер не сможет начать интерпретацию стилей до тех пор, пока styled-components не «распарсит» их и не добавит в DOM.
emotion кстати может, но я не тестил) ваще не видел, что этим кто-то пользуетсяAndrey17.09.2018
09:42:24
09:42:24
Dmitry17.09.2018
09:42:27
09:42:27
почему оверхед?.
Дмитрий17.09.2018
09:43:26
09:43:26
Любой подход который будет создавать 100500 объектов чтобы просто прочитать из них строку будет не оч
Dmitry17.09.2018
09:45:21
09:45:21
можно подумать, styled-components в этом плане оптимальней.. :)
GoogleДмитрий17.09.2018
09:46:02
09:46:02
Вполне может быть
Dmitry17.09.2018
09:46:34
09:46:34
там же с ней можно делать типа className={cn(isActive && "active", isDisabled && "disabled")}
Дмитрий17.09.2018
09:47:05
09:47:05
Я раньше jss юзал, он вообще напрямик с cssom работает, радикально быстрее проброса через обычный css в любом виде
В том числе и быстрее парсинга sass
Но тут проблема что хром искренне уверен что cssom апи это для мудаков, и поэтому в девтулсах такие стили закрашены серым (не редактируются)
Dmitry17.09.2018
09:49:14
09:49:14
emotion, кстати, умеет и стили в JS https://emotion.sh/ (справа окошко с двумя табами)
Ааа, понял.
Паша17.09.2018
09:56:14
09:56:14
Привет, я не совсем по React, а по Material UI. В документации написано, что у кнопок есть св-во backgroundColor, но почему-то на практике она не работает
Roman17.09.2018
09:57:18
09:57:18
ля, вот у тебя боль юзать старую версию
Bogdan17.09.2018
09:57:36
09:57:36
Ну и мои компоненты хотя бы с флоу можно нормально использовать в отличии от styled-components, kek))
Dzmitry17.09.2018
09:58:41
09:58:41
Привет, я не совсем по React, а по Material UI. В документации написано, что у кнопок есть св-во backgroundColor, но почему-то на практике она не работает
старая версия материала?документации как минимум
GoogleПаша17.09.2018
10:00:04
10:00:04
Тогда другой вопрос, как задать цвет кнопке в Material UI?
допустим через scss файл
Roman17.09.2018
10:00:17
10:00:17
Паша17.09.2018
10:00:18
10:00:18
или через css
Dzmitry17.09.2018
10:00:42
10:00:42
AdminERROR: S client not available
Паша17.09.2018
10:01:14
10:01:14
а как тогда стили применять?
Default17.09.2018
10:01:18
10:01:18
Классы генерятся динамически
Dzmitry17.09.2018
10:01:21
10:01:21
Default17.09.2018
10:02:13
10:02:13
Ну и отлично
Default17.09.2018
10:02:44
10:02:44
Ну если так классы прокидывать, то пожалуйста
Но я б не стал
Там оверрайдов вагон будет
Artyom17.09.2018
10:03:01
10:03:01
эм,https://material-ui.com/demos/autocomplete/
и?
Это не компонент автокомплита, а необходимость копипастить бойлерплейтGoogleПаша17.09.2018
10:03:08
10:03:08
ок, тогда как же мне раскрасить кнопку?
Default17.09.2018
10:03:24
10:03:24
Тот же дауншифт очень неплох
Dmitry17.09.2018
10:04:20
10:04:20
А еще у styled есть неприятная особенность — они все пропсы пробрасывают дочерним html элементам, из-за этого React постоянно ругается на неизвестные props'ы, boolean вместо строки для disabled и т.д.
Artyom17.09.2018
10:04:30
10:04:30
Нахер писать своё, когда есть либы качественнее
Ну сделали бы отдельный сабпакет - обертку над дауншифтом. А так каждый раз копипастить и разбираться, не круто...А еще у styled есть неприятная особенность — они все пропсы пробрасывают дочерним html элементам, из-за этого React постоянно ругается на неизвестные props'ы, boolean вместо строки для disabled и т.д.
не все, а только те названия которых валидны для dom элементаDefault17.09.2018
10:04:58
10:04:58
Dzmitry17.09.2018
10:05:22
10:05:22
Паша17.09.2018
10:05:50
10:05:50
Может кто-нибудь скажет как раскрасить кнопку?
Dzmitry17.09.2018
10:06:07
10:06:07
Default17.09.2018
10:06:58
10:06:58
А еще у styled есть неприятная особенность — они все пропсы пробрасывают дочерним html элементам, из-за этого React постоянно ругается на неизвестные props'ы, boolean вместо строки для disabled и т.д.
const styles = css`
foo: ${prop('transparent')};
`
const StyledLink = styled(({
transparent,
}) => <Element />)`${styles}`не все, а только те названия которых валидны для dom элемента
Но ворнингом в консоль всё равно плюётсяЯ тут выше скинул способ пропсы поймать на ходу
Dmitry17.09.2018
10:09:02
10:09:02
не все, а только те названия которых валидны для dom элемента
Не, это реакт потом пробрасывает только валидные. А sc ему все передаёт
Открыть в Telegram