построить скелетный экран в CSS, где граница не отражает

Question

• Я пытаюсь создать скелетный экран в css
• , поэтому я сослался по ссылке ниже https://css -tricks.com / building-skeleton -screen-css-custom-properties/
• но проблема в моем приложении реакции, оно не работает.
• Я могу видеть 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 вы не можете включить это слово, потому что оно перепутано с ключевым словом class в Javascript.Код JSX на самом деле не является Javascript, и он позже скомпилирован , так что среда выполнения javascript его понимает.

Итак, используйте className вместо class, чтобы установить класс CSS элемента:

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

становится

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