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

Posted 2023-03-15

【中文标题】在 React Hooks 中使用带有样式组件的 CSS attr()

【英文标题】：Using CSS attr() with styled components in react Hooks

【发布时间】：2021-10-11 20:34:54

【问题描述】：

我正在尝试在 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%);
    
`;

【参考方案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%);
  
`;

【讨论】：

嗨，我也试过这个，但它不起作用（（

@BoburmirzoMuhibullaev 哦，我明白了，好像我忘记了引号，试试content: $( pers ) => `"$pers %"`;。我刚刚在代码盒中测试了它并呈现。

@BoburmirzoMuhibullaev codesandbox.io/s/…

@BoburmirzoMuhibullaev 太棒了！如果您的问题/问题得到解决，那么我邀请您接受答案 (***.com/help/someone-answers)。干杯，祝你好运。