I wrote a React and build it as a iife. I import it to another website by this:

<link href="https://example.com/static/style.css" rel="stylesheet" />
<script src="https://example.com/static/chatbox.iife.js"></script>

And my react component css got override by the website’s global CSS.
In React, I already using css module, but my component css is still being override even include !important.
The whole React component font is changed, the markDown margin become 0 and without list-style-type etc…

import styles from '../style.module.css'
...
return (
        <div className={styles.chatBoxContainer}>
            ... some loop on the messages
            <Markdown
                                className={`${styles.content} ${styles.preWrapMarkdown}`}
                                remarkPlugins={[remarkGfm]}
                                rehypePlugins={[rehypeHighlight]}>
                                {message.content}
                            </Markdown>
        </div>
)

.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;
}

I can change the global css on that website, but the style just become so ugly and it contain many global 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

So, is there a way to block all global css affecting my react components ?