Question

我正在尝试在CSS中构建骨架屏幕
所以我提到了以下链接 https://css-tricks.com/building-skeleton-screens-css-custom-properties/
但是问题出在我的React应用中，它无法正常工作。
我能够看到html div代码，但看不到CSS更改。
我通过放置边框进行调试，但仍然无法正常工作。
你们能告诉我如何解决吗？
在下面提供我的代码段和沙箱

不起作用：https://stackblitz.com/edit/react-kjhuv7?file=card.scss

.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;

  }
}

Answer 1

在Javascript中，单词class是保留的，这意味着在您的JSX代码中您不能包含该单词，因为它与Javascript的class混淆了。 JSX代码不是真正的Javascript，后来被编译，以便javascript运行时可以理解。

因此，使用className代替class来设置元素的CSS类：

<div class="card"> card data</div>

成为

<div className="card"> card data</div>

在css中构建一个骨架屏幕，其中边框不反映

1 个答案: