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

【问题标题】：Using CSS attr() with styled components将 CSS attr() 与样式化组件一起使用
【发布时间】：2018-03-17 06:43:06
【问题描述】：

我正在尝试使用 css 内容 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>
    );
  }

【问题讨论】：

标签： javascript css reactjs css-content styled-components

【解决方案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>

【讨论】：