Использование вложенных псевдо-CSS-селекторов с React-Emotion

Работает над странной проблемой.

Ниже приведены два блока кода. Один из них работает хорошо, а другой - нет.

Эта работа

const StyledButton = styled('button')`
  // Some styles here

  :first-child {
    // Some other styles
  }

  :first-child:after {
    content: 'F';
  }
`
// After get applied succesfully to the first child

Это не

const StyledButton = styled('button')`
  // Some styles here

  :first-child {
    // some other styles

    :after {
      content: 'F';
    }
  }
`
// After get applied to all nth child.

Пользуюсь react-emotion.

Это преднамеренное поведение или я что-то упускаю? Я хочу добиться, чтобы :after применялся только к первому потомку, используя подход, аналогичный второму.

reactjs styled-components

22.05.2018 08:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

14 650

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Думаю, на вложенном :after ошибка в коде

Изменение, которое, если я прав, решило бы вашу проблему, заменив вложенный :after на &:after следующим образом:

const StyledButton = styled('button')`
    // Some styles here

    &:first-child {//<====== note the & here
        // some other styles

        &:after { //<====== note the & here
           content: 'F';
        }
    }
}

& является заполнителем для родительского селектора, поэтому приведенный выше код будет компилироваться в:

button:first-child {
    // some other styles
}
button:first-child:after {
      content: 'F';
}

Обновлено: Песочница с рабочим примером

Надеюсь это поможет!

Я тоже пробовал это. Только что понял, что если я помещаю псевдоселектор сразу после открытия: first-child {} и добавляю другие стили после применения: after, он работает. Например, работает: first-child {: after {} // другие стили}.

— 22.05.2018 08:36

@SanjayJoshi Взгляните на эту песочницу: https://codesandbox.io/s/9j6j292n0o (не удалось получить встроенную ссылку для работы с SO), я разработал код в небольшой пример

— 22.05.2018 08:42

22.05.2018 08:33