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

Вот я в реакте написал примерно такой код



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)





Все мои стили описаны в цсс. Цсс работает я импортнул навбар видит цсс, а когда пытаюсь через инеер хтмл. То просто обычный текст без стилей

Проблема возникает из-за неправильного использования JSX-синтаксиса внутри JavaScript-кода. В React вы должны обернуть ваш HTML-код в JSX-элементы, используя фигурные скобки

Ваш код выглядит нормально, но есть пара замечаний:

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

export const modalCatalog = `

.modal-catalog {

}

`
Попробуйте использовать className вместо innerHTML. innerHTML не поддерживает CSS, он просто вставляет HTML-код без стилей.

А причем тут реакт? Тут ванильный жс

Ваш код использует innerHTML для добавления HTML-кода в элемент с классом qw1234. Однако, когда вы используете innerHTML, вы должны использовать атрибут class вместо className, чтобы применить стили CSS к элементам. Попробуйте заменить className на class в вашем коде, и это должно решить проблему с отсутствием стилей.

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