如何在 reactjs 中使用伪元素作为内联样式？ [复制]答案

【问题标题】：How to use pseudo elements in reactjs as inline styling? [duplicate]如何在 reactjs 中使用伪元素作为内联样式？ [复制]
【发布时间】：2021-10-13 16:11:43
【问题描述】：

这里从道具中获取图像，我必须将该图像作为特定元素的背景图像。我使用样式组件实现了这一点。但是在我的应用程序中，我们没有在任何地方使用样式化组件，所以我尝试使用内联样式来实现这一点。因为它是动态的，所以我们不能或可能无法将此图像传递给 CSS 文件。

这是我使用样式组件的方法，无论如何要使用内联样式更改它，请帮助我，谢谢

样式化组件

const BannerImage = styled.div`
  &::after {
    background: url(${(props) => props.image}) no-repeat;
    content: '';
    background-size: cover !important;
    background-position: center center !important;
    right: 0;
    height: 100%;
    position: absolute;
    left: 0;
  }
  @media (min-width: 992px) {
    &::after {
      right: calc((-1%) - ((100vw - 992px) / 2));
    }
  }
`;

元素使用了样式化组件

<BannerImage
      image={image}
      className="col-lg-6 col-md-16 col-sm-12 col-12 h-100 d-flex"
 />

【问题讨论】：

stackoverflow.com/questions/28269669/… 这可能会有所帮助

标签： css reactjs

【解决方案1】：

虽然您不能使用内联样式直接设置伪元素的样式，但您可以设置 CSS 变量。你能用它作为传递背景图片 url 的一种方式吗？

例如

   const myElement = document.querySelector('.myElement');
    myElement.style.setProperty('--bgurl', 'URL(' + the URL + ')');

在 CSS 中

.myElement::after {
  background-image: --bgurl;
}

【讨论】：

【解决方案2】：

对于背景色、颜色等简单样式，可以直接使用内联样式，无需任何库。

但是对于伪类、伪元素和媒体查询，你必须使用一个库来实现内联样式。

有一个名为 Radium https://github.com/FormidableLabs/radium 的库可以在 React 中提供帮助。

【讨论】：