如何将 CSS 从“::before”选择器移动到 React？

Posted 2023-03-06

【中文标题】如何将 CSS 从“::before”选择器移动到 React？

【英文标题】：How to move CSS from a '::before' selector into React?

【发布时间】：2020-12-13 09:43:19

【问题描述】：

我有一个程序可以创建一个在等距网格上移动的小型机器人。

每个图块都是一个图像，机器人是一个叠加图像，使用::before 选择器创建：

.robot::before
  content: '';
  position: absolute;
  top: -40px;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("https://femto.pw/us7j.png");
  background-size: contain;
  background-repeat: no-repeat;

CSS项目的源代码可以在here找到。

我想转换 CSS 以便在创建它的“react”组件中对其进行样式设置。我在背景 div 元素之前创建了一个span，并将 CSS 放在那里假装是“::before”元素。创建图块的代码来自：

  <td style=transform: `translateX($x * 4em)`>
    <div className="tile">
      <div className="background" + (robot ? ' robot' : '') />
    </div>
  </td>

到

  <td style=transform: `translateX($x * 4em)`>
    <div className="tile">
      robot &&
        <span style=
          "content": "''",
          "position": "absolute",
          "top": "-40px",
          "bottom": "0",
          "left": "0",
          "right": "0",
          "backgroundImage": "url(\"https://femto.pw/us7j.png\")",
          "backgroundSize": "contain",
          "backgroundRepeat": "no-repeat"
           />
        
      <div className="background" />
    </div>
  </td>

此时项目的代码可以在here找到。

但是，当我进行这个我认为应该相同的更改时，它看起来完全不同！

发生了什么？如何将 CSS 转换为在 React 中工作（没有这样的 CSS 选择器）？

【问题讨论】：

问题在于 ::before 元素曾经位于 background robot div 上，该 div 应用了 height 和 width，因此 ::before 元素的定位、宽度和高度具有风格的价值观。由于您将所有内容都移到了跨度上，因此没有什么可以告诉该元素如何调整大小。移动background内部的span元素进行测试：codepen.io/chrislafrombois/pen/XWdpQVd

这太棒了，而且效果很好！您想将其复制到答案中以便我将其标记为正确吗？ :)

是的！添加并回答。

【参考方案1】：

问题在于 ::before 元素曾经位于 background robot div 上，该 div 应用了高度和宽度，因此 ::before 元素的定位、宽度和高度具有可设置样式的值。

由于您将所有内容都移到了span，因此没有什么可以告诉该元素如何调整大小。

这是更新后的笔，将 span 移至 background div：

https://codepen.io/chrislafrombois/pen/XWdpQVd

以下是更改的代码：

const CreateTile = (x, robot) => (
  <td style=transform: `translateX($x * 4em)`>
    <div className="tile">
      
      <div className="background">
        robot &&
        <span style=
          "content": "''",
          "position": "absolute",
          "top": "-40px",
          "bottom": "0",
          "left": "0",
          "right": "0",
          "backgroundImage": "url(\"https://femto.pw/us7j.png\")",
          "backgroundSize": "contain",
          "backgroundRepeat": "no-repeat"
           />
        
      </div>
    </div>
  </td>
)

【参考方案2】：

您的问题是您忘记添加一些来自.background.robot 年长父母的样式：

.robot 
    transform: rotateZ(-45deg) rotateY(-60deg) translate3d(-1.1em, -4.8em, 0em);
    height: calc(23em);
    width: calc(23em);

只需使用z-index: 1; 将它们添加到跨度中，您就会得到原始结果。只需在this codepen 中查看即可。

【讨论】：

这也是一个很好的解决方案！我已经接受了另一个答案，并认为我会将其标记为解决方案，因为它消除了任何重复的样式。感谢您的替代方案:)

是的，当然没问题；）但如果这是一个好的解决方案，它也可以得到upvote，对吗？ :)

见鬼！ @johannchopin :)