Получение ошибки при добавлении css к кнопке в моем приложении для реагирования на js

Я стилизовал кнопку на своем веб-сайте js и получил эту ошибку при написании для нее css, на самом деле я собирался анимировать его после наведения мыши. показывает следующие ошибки

1.двоеточие ожидается [11,9] 2. ожидается точка с запятой [12,18] 3. { ожидается [13, 14] 4. ожидается at-правило или селектор[15,5] 5. } ожидается [31,13] 6. ожидаемый идентификатор [34,19] 7. { ожидается [35,20] 8. ожидается at-правило или селектор [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;
        }
    }
    
}

Если вы хотите использовать файл стиля .scss в своем проекте, необходимо установить нпм я дерзкий, поскольку вы используете стиль SASS, а не стиль CSS. Нажмите здесь - Стиль React SASS

Raeesh Alam 07.05.2022 09:05
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Предполагая, что вы используете стандартную таблицу стилей, вы не можете использовать вложенность стилей. Например:

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

Css, показанный во фрагменте выше, не является допустимым (или стандартным) css. Вы можете сделать что-то вроде этого:

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

или вы можете использовать scss, который является препроцессором CSS и позволяет вам использовать вложение и другие интересные функции. Чтобы узнать подробности или другие способы реализации css в React, прочитайте это.

Другие вопросы по теме