attr css函数看起来非常强大，但也非常有限，如下所述：
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
注意：attr（）函数可以用于任何CSS属性，但是对内容以外的属性的支持是实验性的，对type-or-unit参数的支持也是稀疏的。
不管怎样，你可以使用一个技巧来得到完全相同的结果，但是使用css自定义属性，而不是在html元素上定义一个属性，你将在你的css规则中使用attr来读取，你可以使用内联样式在一个自定义属性上设置相同的值，然后在你的规则中使用那个自定义属性来设置元素的left属性。
在这里我还放置了一个具有相对位置的容器，以更好地突出此解决方案的正确工作：

.container{
  position: relative;
  border: dashed 4px lightgray;
  height: 100vh;
  width: 100vw;
}

.container > div{
  position: absolute;
  left: var(--left-value);
  border: solid 1px gray;
  background: red;
  width: 20px;
  height: 20px;
}

<div class="container">
  <div style="--left-value: 20px;"></div>
</div>

当然，使用自定义属性而不是直接使用left属性看起来并不明智，因为您已经在使用内联样式了。在某些情况下，这种解决方案可能是可行的方法...但在这里，它确实没有真正改变游戏规则

首先，HTML中没有left-value这样的属性，你必须在HTML中使用pre-build attr，因为它不是react。其次，如果你想左对齐，只需使用css的position和left attr，或者使用margin-left做一些样式。