При попытке добавить материал дизайна рябь анимации кнопки я взял чистую реализацию CSS здесь и использовал его.
Но теперь мы переходим на Styletron. Как мне воссоздать это
.ripple-class {
/* props */
}
.ripple-class:after {
/* props */
}
.ripple-class:active:after {
/* props */
}
в стилетроне? Я пробовал это
injectStyles(styletron, {
// ripple-class props
':after': {
// :after props
},
':active:after': {
// more props
}
});
А также
injectStyles(styletron, {
// ripple-class props
':after': {
// :after props
},
':active': {
':after': {
// more props
}
}
});
Кнопка не оживляет. Если я просто поставлю фактический css в теге стиля, он отлично работает.
Первый, который вы пробовали, должен работать, но вам нужно дважды обернуть свойство content
в кавычках, иначе оно не будет иметь значения в полученном CSS (и целое :after
псевдоориентирования CSS затем игнорируется CSS за неправильное значение для свойство content
):
injectStyles(styletron, {
// ripple-class props
':after': {
content: '""', // '""' (literally "") is the value not '' (literally nothing)
// :after props
},
':active:after': {
content: '""',
// more props
}
});
Потому что ':after': { content: '' }
приведет к тому, что CSS будет выглядеть так :after { content: }
что неверно.
Принимая во внимание, ':after': { content: '""' }
приведет к тому, что CSS выглядит так :after { content: ""}
что является правильным.