在我的反应 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 的详细信息或更多方法，请阅读此。