Ну изначально это текущая дата, будет делаться блюр, а когда данные подъедут, то что пришло с сервера

а в таком случае?)

ребят, что затуп какой-то со styhled components произошел. есть svg иконка. то есть <svg id="icon"> <path ... ></path> <path ... ></path> <path ... ></path> <path ... ></path> </svg> Иконку сделал отдельным компонентом. Нужно стилизовать тег svg и все вложенные теги path. То есть при работе с css я делал так: #icon { ... }, #icon path { ... } Как это вообще делается посредством sc, что-то не допираю?

https://www.styled-components.com/docs/advanced#referring-to-other-components

ребят, что затуп какой-то со styhled components произошел. есть svg иконка. то есть <svg id="icon"> <path ... ></path> <path ... ></path> <path ... ></path> <path ... ></path> </svg> Иконку сделал отдельным компонентом. Нужно стилизовать тег svg и все вложенные теги path. То есть при работе с css я делал так: #icon { ... }, #icon path { ... } Как это вообще делается посредством sc, что-то не допираю?

а что надо, тупо fill в path дописать?

нет, применить стили ко всем path внутри svg

подскажите, можно ли как то настроить Reformat code (автоматическое выравнивание кода) для styled-components в вебшторме? Стоит плагин для вебшторма, stylelint-processor-styled-components есть.

https://www.styled-components.com/docs/advanced#referring-to-other-components

я оч туплю, но не вижу в примерах того, что нужно

ребят, что затуп какой-то со styhled components произошел. есть svg иконка. то есть <svg id="icon"> <path ... ></path> <path ... ></path> <path ... ></path> <path ... ></path> </svg> Иконку сделал отдельным компонентом. Нужно стилизовать тег svg и все вложенные теги path. То есть при работе с css я делал так: #icon { ... }, #icon path { ... } Как это вообще делается посредством sc, что-то не допираю?

а зачем тебе там sc?

если можно просто через stateless component все оформит добавив одну строчку сверху

потому что у меня нет вообще стилей, кроме нормалайза))

const mySvg = ({ style }) => ..

переименовываешь svg js, делаешь из него компонент и расставляешь стили :))

мне нужно применить стили ко всем вложенным path

ну так и напихай туда style=

и напрямую это сделать невозможно, так как хз вообще сколько там path может быть. ну то есть их несколько, а написать я хочу единожды))

другими словами, я не могу найти в доке SC аналог для вложенных селекторов css

"все path внутри svg" = svg icon //так в css а как в SC ? ((

и напрямую это сделать невозможно, так как хз вообще сколько там path может быть. ну то есть их несколько, а написать я хочу единожды))

в sc все тоже самое как и в css ))

в sc все тоже самое как и в css ))

поэтому это точно возможно в sc, но в доке не могу найти этого

Вот из доков, как и в sass используешь > path { ... }

супер, спасибо большое

но ГДЕ это было в доках ?)

но ГДЕ это было в доках ?)

в FAQ. Заработало в итоге? мне самому интересно стало, ща попробую

в FAQ. Заработало в итоге? мне самому интересно стало, ща попробую

да, все заработало!

а чего ему не работать? обычный css selector

svg можно гридом раскидывать? оО

я вот sc прогонял через postcss плагины свои, вот это было весело :))

можно что угодно там внутри делать

Такой вопрос, еще уместно прописывать bind(this) в стэйте, или правильней стрелочными функциями?

Такой вопрос, еще уместно прописывать bind(this) в стэйте, или правильней стрелочными функциями?

стрелочными конечно :)

Эрроу фанкшнс

?

интересно мнение на эту же тему с другого ракурса

например есть несколько однотипных компонентов

и надо протащить в них 4-5 пропсов сгенеренных внешних хелпером

хелпер внутри должен делать setStatе

вот как тут лучше передать в хелпер self: this или забиндить хелпер?

Передавай this в хелпер

ну я вот тоже на этом варианте остановился

дико стремная дока у sc

третий раз читаю за час и не вижу базовых вещей

export const LangIcon = styled.svg` width: 50px; justify-self: center; align-self: center; > path { transform: scale(0.5); } `; как теперь стилизовать LangIcon ?! const RuIconStyled = styled(LangIcon)` ... ` const RuIconStyled = LangIcon.extend` ... `

export const LangIcon = styled.svg` width: 50px; justify-self: center; align-self: center; > path { transform: scale(0.5); } `; как теперь стилизовать LangIcon ?! const RuIconStyled = styled(LangIcon)` ... ` const RuIconStyled = LangIcon.extend` ... `

Первый вариант

Второй deprecated

+

оба варианта не работают :(

Cannot create styled-component for component: [object Object]

Странно у меня работает

я верно понимаю, что не должен создавать компонент а импортировать прям LangIcon ?

Да офк

не работает, что-то не так с LangIcon

чейнить стили должно же быть базовой фишкой блин

подскажите, куда посмотреть внимательнее?

Посмотри как именованные экспорты импортировать

ERROR: S client not available

Блять))

Посмотри как именованные экспорты импортировать

посмотрел, спасибо!

привет всем в этом чятике

@itsjohncena https://codesandbox.io/s/pykkoynwoj

@itsjohncena https://codesandbox.io/s/pykkoynwoj

Днем чекну

мне кажется что две зеленые кнопки - это посыл

Днем чекну

??

это проекция нашего возраста на молодые дни

Но если кто пропустил, есть SC компонент, которые стилизован через ThemeProvider и вот от него не получается унаследовать просто так. Делаю, что-то типа UI Kit в проекте и юзать SC было бы удобно, но пока непонятко как раширять написанные таким способом компоненты.

@itsjohncena https://codesandbox.io/s/pykkoynwoj

День наступил. В доке же написано что чтобы стилизовать обычные реакт компоненты они должны принимать проп классНейм и прокидывать в компонент

const Button = ({ className }) => ( <Anything className={className} /> )

export default (state = initialState, action) => { switch (action.type) { case PAY_BY_COIN: return state.map(coin => { if (coin.id === action.payload.id) { return { ...coin, count: coin.count - 1 }; } return coin; }); default: return state; } }; Ребят подскажите плиз, мне нужно взять монету из пользовательского кошелька и передать ее продавцу. Задача обучающая. У меня есть два редьюсера, пользовательский и кассирский. Выше описан пользовательский редьюсер. Кассирский примерно такой же , только там идет увеличиение счетчика и экшен называется ADD_CASH

export default (state = initialState, action) => { switch (action.type) { case PAY_BY_COIN: return state.map(coin => { if (coin.id === action.payload.id) { return { ...coin, count: coin.count - 1 }; } return coin; }); default: return state; } }; Ребят подскажите плиз, мне нужно взять монету из пользовательского кошелька и передать ее продавцу. Задача обучающая. У меня есть два редьюсера, пользовательский и кассирский. Выше описан пользовательский редьюсер. Кассирский примерно такой же , только там идет увеличиение счетчика и экшен называется ADD_CASH

братишка

не могу бы ты это на гист гитхаба сдублировать?

в чем вопрос то

https://jsfiddle.net/exsL8p0r/ (думаю тоже подойдет) Нужно сделать что-то типа транзакции , т.е. одновременно отнять монету из моего кошелька (PAY_BY_COIN) и добавить монету кассиру (ADD_CASH). По сути нужно вызвать что-то типа window.store.dispatch({type:"ADD_CASH",payload:1}) , так же можно? не могу понять как получить к нему доступ без говно кодинга

https://jsfiddle.net/exsL8p0r/ (думаю тоже подойдет) Нужно сделать что-то типа транзакции , т.е. одновременно отнять монету из моего кошелька (PAY_BY_COIN) и добавить монету кассиру (ADD_CASH). По сути нужно вызвать что-то типа window.store.dispatch({type:"ADD_CASH",payload:1}) , так же можно? не могу понять как получить к нему доступ без говно кодинга

А зачем 2 экшна для этого?

у меня сейчас стор выглядит примерно так:

store = { userMoney:100 cashierMoney:0 }

данные в двух разных ветках стора

И? Зачем тебе 2 экшна?

таак

давйте разъебем новичка

давайте сровняем его с грязью

И? Зачем тебе 2 экшна?

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

в примерчике выше - state это только текущая ветка т.е. userMoney

в cashierMoney я никак не могу попасть из текущего редьюсера(

2 диспатча?

на добавление и вычет?