Estaba diseñando un botón en mi sitio web de react js y obtuve este error mientras escribía el css para él, en realidad iba a animarlo después de pasar el mouse. está mostrando los siguientes errores
1. Se esperaba dos puntos [11,9] 2. Se esperaba un punto y coma [12,18] 3. { Se esperaba [13, 14] 4. Se esperaba una regla o selector [15,5] 5. } Se esperaba [31,13 ] 6. identificador esperado [34,19] 7. { esperado [35,20] 8. regla-at o selector esperado [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; } } }Suponiendo que está utilizando una hoja de estilo estándar, no puede utilizar estilos anidados. Por ejemplo:
button { span { ... } ::hover { ... } }El CSS que se muestra en el fragmento anterior no es un CSS válido (o estándar). Puedes hacer algo como esto:
button { ... } button span { ... } button::hover { ... } o puede usar scss , que es un preprocesador css y le permite usar el anidamiento y otras características geniales. Para obtener detalles o más formas de implementar css en React, lea esto .