Как оформить псевдо-элемент псевдоклассом с помощью Styletron

1

При попытке добавить материал дизайна рябь анимации кнопки я взял чистую реализацию 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 в теге стиля, он отлично работает.

Теги:
jss
styletron

1 ответ

0
Лучший ответ

Первый, который вы пробовали, должен работать, но вам нужно дважды обернуть свойство 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: ""} что является правильным.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню