Запретить переопределение CSS в пакете iife? ⇐ CSS

[Anonymous]

Я написал React и создал его как жизнь. Я импортирую его на другой сайт следующим образом:

Код: Выделить всё

И CSS моего компонента реагирования был переопределен глобальным CSS веб-сайта.
В React я уже использую модуль CSS, но CSS моего компонента все еще переопределяется, даже включая !important.
Изменен весь шрифт компонента React, поле markDown стало равным 0, без типа списка и т. д.

Код: Выделить всё

import styles from '../style.module.css'
...
return (

... some loop on the messages

{message.content}


)

Код: Выделить всё

.chatBoxContainer {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
font: Arial, sans-serif !important;
}

.message .content {
order: 2;
border-radius: 5px;
overflow-wrap: break-word;
font: Arial, sans-serif !important;
}

.preWrap {
white-space: pre-wrap;
/* CSS3 */
white-space: -moz-pre-wrap;
/* Mozilla, since 1999 */
white-space: -pre-wrap;
/* Opera 4-6 */
white-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* Internet Explorer 5.5+ */
font: Arial, sans-serif !important;
}

.preWrapMarkdown pre {
white-space: pre-wrap;
overflow-x: auto;
word-break: normal;
border-radius: 15px;
font: Arial, sans-serif !important;
}

Я могу изменить глобальный CSS на этом веб-сайте, но стиль становится таким уродливым и содержит много глобальных CSS.

Код: Выделить всё

/* global */
* {
/* -moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none; */
margin: 0;
padding: 0;
/*font-family: Helvetica,Verdana,'Comic Sans MS','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
font-family: sans-serif;
list-style-type: none;
}
html {
overflow-x: hidden;
overflow-y: scroll;
}
a {
color: inherit;
text-decoration: none;
}
html, body {
height: 100%;
}
... and many left

Итак, есть ли способ заблокировать все глобальные CSS, влияющие на мои реагирующие компоненты?

Подробнее здесь: https://stackoverflow.com/questions/786 ... ife-bundle