在我的反應 js 應用程序中將 css 添加到按鈕時出錯

Question

我在我的 React js 網站上設計了一個按鈕，並在為它編寫 css 時遇到了這個錯誤，實際上我打算在鼠標懸停后為它設置動畫。 它顯示以下錯誤

1.冒號預期 [11,9] 2.分號預期 [12,18] 3. { 預期 [13, 14] 4. 規則或選擇器預期 [15,5] 5. } 預期 [31,13 ] 6. 標識符預期 [34,19] 7. { 預期 [35,20] 8. 規則或選擇器預期 [36,9]

button{
    background: black;
    border: none;
    padding: 10px 20px;
    display: inline-block;
    font-size: 1rem;
    font-weight: 800;
    width: 200;
    cursor: pointer;
    transform: skew(-21deg);
    span{
        display: inline-block;
    transform: skew(21deg);

    }

    ::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 100%;
        left: 100%;
        background: #000;
        opacity: 0;
        z-index: -1;
        transition: all 0.5s;
    }
    
    ::hover{
        color: #fff;
            ::before{
            left: 0;
            right:0;
            opacity: 1;
        }
    }
    
}

Answer 1

假設您使用的是標准樣式表，則不能在 styles 中使用嵌套。例如：

button {
   span {
       ...
   }
   ::hover {
       ...
   }
}

上面代碼段中顯示的 Css 無效（或標准）css。您可以執行以下操作：

button {
   ...
}
button span {
    ...
}
button::hover {
    ...
}

或者您可以使用scss ，這是一個 css 預處理器，允許您使用嵌套和其他很酷的功能。 有關在 React 中實現 css 的詳細信息或更多方法，請閱讀此。