Реагировать на компонент как backgroundImage

Question

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

Я пытаюсь добиться установки backgroundImage от компонента вроде:

<content className="content cover-content" style={{backgroundImage: `url(${<FaCar size={48} color="red"/>})`}}>

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

Answer 1

backgroundImage - это свойство CSS, для которого требуется URL-адрес к изображению, вы можете загрузить значок и добавить его локально в свой проект.

Или вы можете достичь того же результата, используя свойство CSS z-index

Используя стилевые компоненты, мы можем стилизовать компонент, добавив его позади основного содержимого с помощью CSS Свойство z-index.

 const Icon = styled.section`
      ..
      z-index: -1;
    `;

Затем добавляем его вокруг значка, чтобы придать ему стиль, который мы хотим.

          <Icon>
            <FaCar />
          </Icon>

Ссылка на песочницу: https://codesandbox.io/s/wild-grass-sk9d9?file= / src / App. js

Answer 2

Это не может работать, потому что CSS правила не могут содержать HTML код. Используя компонент React, вы делаете именно это. Единственный способ указать фоновое изображение здесь - это использовать стандартный способ, указав URL-адрес изображения в вашем правиле CSS.