Javascript 在css中构建一个框架屏幕，其中边框不'；t反射 我正在尝试用css构建一个框架屏幕 所以我参考了下面的链接 但问题是我的react应用程序不起作用 我可以看到HTMLdiv代码，但看不到css的更改 我通过设置边界进行了调试，但仍然不起作用 你们能告诉我怎么修理吗 下面提供我的代码片段和沙盒

不工作：

---

在Javascript中，单词

class

是保留的，这意味着在JSX代码中不能包含该单词，因为它与Javascript的

class

关键字相混淆。 JSX代码并不是真正的Javascript，它是稍后编译的，以便Javascript运行时理解它

因此，使用

className

而不是

class

来设置元素的CSS类：

卡数据

变成

---

卡数据

谢谢你的回复我在stackblitz中更新了，但仍然不起作用，你能在我的stackblitz中更新吗？我似乎无法保存项目。问题是你无法看到效果，因为加载速度太快。我为您设置了一个超时功能，以查看效果。谢谢您可以通过注释进行解释，以便帮助我理解。我添加了一些注释，解释超时功能，以用于模拟目的（在生产中删除）。对于css，我建议安装scss编译器npm包，并在您的计算机上本地执行。在终端上运行

npm安装-g sass

，然后运行

sass-card.scss-card.css

.card {
  width: 280px; 
  border: red;
  height: var(--card-height);

  &:empty::after {
    content:"";
    display:block;
    width: 100%;
    height: 100%;
    border-radius:6px solid black;
    box-shadow: 0 10px 45px rgba(0,0,0, .1);
    background-color:  brown;

    background-image:
      linear-gradient(
        90deg, 
        rgba(lightgrey, 0) 0, 
        rgba(lightgrey, .8) 50%, 
        rgba(lightgrey, 0) 100%
      ),                          //animation blur
      var(--title-skeleton),      //title
      var(--desc-line-skeleton),  //desc1
      var(--desc-line-skeleton),  //desc2
      var(--avatar-skeleton),     //avatar
      var(--footer-skeleton),     //footer bar
      var(--card-skeleton)        //card
    ;

    background-size:
      var(--blur-size),
      var(--title-width) var(--title-height),
      var(--desc-line-1-width) var(--desc-line-height),
      var(--desc-line-2-width) var(--desc-line-height),
      var(--avatar-size) var(--avatar-size),
      100% var(--footer-height),
      100% 100%
    ;

    background-position:
      -150% 0,                      //animation
      var(--title-position),        //title
      var(--desc-line-1-position),  //desc1
      var(--desc-line-2-position),  //desc2
      var(--avatar-position),       //avatar
      var(--footer-position),       //footer bar
      0 0                           //card
    ;

    background-repeat: no-repeat;
    animation: loading 1.5s infinite;
    background-color: black;
  }
}

@keyframes loading {
  to {
    background-position:
      350% 0,        
      var(--title-position),  
      var(--desc-line-1-position),
      var(--desc-line-2-position),
      var(--avatar-position),
      var(--footer-position),
      0 0
    ;
        background-color:  yellow;

  }
}