Как стилизовать псевдоэлемент React + StyledComponents?

Question

[Павел Клешнин]

Есть компонент ArticleInfo:

const ArticleInfo = ({key, name, url, text}) => (
    <Article key = {key}>
        <h3>{name}</h3>
        <p>{text}</p>
    </Article>
)

Рендерится он вот так:
{features.map(item => ArticleInfo(item))}

Как я могу в цикле указать background: url(${url}) для каждого псевдоэлемента?

Answer 1

[Антон Спирин]

const Article = styled.div`
  &:before {
    background-image: url(${props => props.beforeImage});
  }
  &:after {
    background-image: url(${props => props.afterImage});
  }
`;

<Article beforeImage={beforeImage} afterImage={afterImage}>
  {/* ... */}
</Article>

Comments

[Павел Клешнин]

Это для самого блока будет бэкграунд, а мне нужно для псевдоэлементов.

[Антон Спирин]

Павел Клешнин, без разницы:

const Article = styled.div`
  &:before {
    background-image: url(${props => props.beforeImage});
  }

  &:after {
    background-image: url(${props => props.afterImage});
  }
`;

[Павел Клешнин]

Антон Спирин, ну да, точно, спасибо. Ссылки на иконки отображаются теперь правильно, но сами иконки не подгружаются. Но если сделать импорт import house from '../img/house.png';, и указать background: url(${house}) - тогда все работает. Правильно ли я понимаю, что картинки нет по адресу localhost:3000/img/hands.png, а есть она только если импортнуть ее с локального диска?

[Антон Спирин]

Павел Клешнин, смотря какой вы подход используете. Если пишите просто строки, то ресурсы должен отдавать ваш сервер. Если даете копирование ресурсов в статические директории и резолвы на откуп webpack, то надо делать импорты. я делаю так:

<SomeComponent image={require('img/someImage.jpg')} />

Для каталога с картинками имеет смысл написать алиас:

{
  'img': './src/assets/images',
}

чтобы не писать:

<SomeComponent image={require('../../../../assets/images/someImage.jpg')} />

[Павел Клешнин]

Антон Спирин, общую идею я понял, а вот остальное не осилил. Картинки у меня хранятся в src/img/, компоненты в src/Components/, в начале компонента объявляю массив объектов, в каждом есть свойство url: './img/someImage.png'. Почему-то через import он видит картинки, а через свойство background передает сам текст ссылки, но картинку не видит. Не могли бы вы объяснить, что я делаю не так?