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

Posted 2023-02-22

【中文标题】如何在 reactjs 中使用伪元素作为内联样式？ [复制]

【英文标题】：How to use pseudo elements in reactjs as inline styling? [duplicate]

【发布时间】：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"
 />

【问题讨论】：

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

【参考方案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 中提供帮助。