将 CSS attr() 与样式组件一起使用

Question

我正在尝试使用 css content attr 函数将百分比数字放入 svg 圆圈内，如下所示：

content: attr(data-percent)%;

伪元素不会呈现，因为样式化组件似乎无法处理最后的 %。如果我删除它，它会起作用，但我希望数字显示为 20% 并且此格式对常规 CSS.

有效

这里有什么我遗漏的吗？还是图书馆的限制？

const Div = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  &:after {
    content: attr(data-percent)%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
`;

render() {
    return (
      <Div data-percent={20}>
        <sgv viewBox="0 0 120 120">
          <circle cx="60" cy="60" r="50" fill="none" strokeWidth="10" strokeLinecap="round"/>
        </svg>
      </Div>
    );
  }

Answer 1

百分号必须是字符串并与 attr() 值分开，如下所示：

content: attr(data-percent) "%";

或者只是将百分号放入数据属性而不是 css 样式

data-percent="20%"

演示

div {
  position: relative;
  width: 100%;
  height: 100%;
}

div:after {
  content: attr(data-percent) "%";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div data-percent="20">
  <svg viewBox="0 0 120 120">
    <circle cx="60" cy="60" r="50" fill="none" strokeWidth="10" strokeLinecap="round" />
    </svg>
</div>

将 CSS attr() 与样式组件一起使用

Using CSS attr() with styled components

javascript

css

reactjs

css-content

styled-components