Проблема с css в реакте - Вопросы по сайтостроению

Вопрос Проблема с css в реакте

Регистрация
5 Дек 2013
Сообщения
90
Репутация
0
Спасибо
0
Монет
0
Вот я в реакте написал примерно такой код



setTimeout(()=>{

const catalog = document.getElementById('catalog');

const qw1234 = document.querySelector('.qw1234');

catalog.addEventListener('click', ()=>{

qw1234.innerHTML= `<div className="modal-catalog" >

<div className="chanr1" >Жанры:</div>



<div className="exit" >

<div className="x">х</div>

</div>



<div className="chanr2-2" >

<div className="chanr2">Романтика</div>

</div>

</div>`



})



});

}, 1000)





Все мои стили описаны в цсс. Цсс работает я импортнул навбар видит цсс, а когда пытаюсь через инеер хтмл. То просто обычный текст без стилей
 
Регистрация
20 Сен 2013
Сообщения
93
Репутация
0
Спасибо
0
Монет
0
Проблема возникает из-за неправильного использования JSX-синтаксиса внутри JavaScript-кода. В React вы должны обернуть ваш HTML-код в JSX-элементы, используя фигурные скобки
 
Регистрация
12 Фев 2013
Сообщения
81
Репутация
1
Спасибо
0
Монет
0
Ваш код выглядит нормально, но есть пара замечаний:

Убедитесь, что ваш CSS файл подключен к странице, на которой вы используете этот код. Если он подключен через тег link в разделе head, убедитесь, что он загружен до того, как вы пытаетесь использовать его стили.
Если вы используете CSS модули, то вам нужно обернуть стили в {} и экспортировать их. Например:

export const modalCatalog = `

.modal-catalog {

}

`
Попробуйте использовать className вместо innerHTML. innerHTML не поддерживает CSS, он просто вставляет HTML-код без стилей.
 
Регистрация
21 Ноя 2013
Сообщения
82
Репутация
1
Спасибо
1
Монет
0
Ваш код использует innerHTML для добавления HTML-кода в элемент с классом qw1234. Однако, когда вы используете innerHTML, вы должны использовать атрибут class вместо className, чтобы применить стили CSS к элементам. Попробуйте заменить className на class в вашем коде, и это должно решить проблему с отсутствием стилей.

Например, замените <div className="modal-catalog"> на <div class="modal-catalog">. Также обратите внимание, что использование innerHTML может быть небезопасным и может привести к атакам межсайтового скриптинга (XSS). Вместо этого рекомендуется использовать методы React для динамического изменения содержимого элементов. Например, вы можете использовать состояние компонента и условный рендеринг для отображения различного содержимого в зависимости от состояния.
 
Сверху Снизу