在 React Hooks 中使用带有样式组件的 CSS attr()

Question

我正在尝试在 css 内容 attr 函数中使用 SkillPer 组件 pers={80} 的属性，如下所示：

content: attr(pers) "%";

但是content: attr()无法获取<SkillPer pers={80}></SkillPer>

的属性

我是不是遗漏了什么？请帮忙！

<SkillBar className="skill-bar">
    <SkillPer
        className="skill-per"
        pers={80}
        style={{ maxWidth: "80%" }}
    ></SkillPer>
</SkillBar>

export const SkillPer = styled.div`
    height: 12px;
    border-radius: 8px;
    background-color: var(--color-green);
    animation: ${fillBars} 2.5s 1;
    position: relative;
    &::before {
        content: attr(pers) "%"; // here
        position: absolute;
        padding: 4px 6px;
        background-color: #333;
        color: var(--color-white);
        font-size: 15px;
        right: 0;
        transform: translateX(200%);
    }
`;

Answer 1

pers是一个道具，所以你可以在样式体中访问道具。我相信这对你有用。

export const SkillPer = styled.div`
  height: 12px;
  border-radius: 8px;
  background-color: var(--color-green);
  animation: ${fillBars} 2.5s 1;
  position: relative;
  &::before {
    content: ${({ pers }) => `"${pers} %"`};
    position: absolute;
    padding: 4px 6px;
    background-color: #333;
    color: var(--color-white);
    font-size: 15px;
    right: 0;
    transform: translateX(200%);
  }
`;

在 React Hooks 中使用带有样式组件的 CSS attr()

Using CSS attr() with styled components in react Hooks

css

attributes

reactjs

styled-components

react-hooks