CSS not rendered correctly

I have a React.js web app that uses Material UI. However, one component in this app manages our website and provides a preview of the customized content. The website uses Bootstrap and Font Awesome so I import in the HTML preview the css for those, along with our website css, in the jsx of this component as shown here (ignore the import paths, they're obscured but confirmed correct):

I've also tried importing the same files in a scss file, instead of in the jsx, and importing that using ES6 in the preview component. This yielded the same result.

In the preview, the css is not being rendered correctly in the browser. I've tried Chrome and Edge and they function the same. There are several elements on the page not being styled correctly, here's just one example of a button that is supposed to be orange:

This is the computed styles in Chrome, which shows the correct hex value of #ff4c00 for the background-color (but somehow has the incorrect rgb equivalent). The rgb value seems to change with every reload and is sometimes correct. However, regardless of the rgb value the button is always blue with an orange border.

The button has the following classes: btn btn-brand btn-round mr-2 mb-2 align-bottom.

Here are the CSS rules that apply to the button:

.ContentManager .btn {
    border-width: 2px;
    border-radius: 0;
    font-family: "Poppins", Arial, serif;
    text-transform: uppercase;
    letter-spacing: 0.09375rem;
    font-weight: 600;
    font-size: 0.625rem;
    padding: 0.9375rem 1.75rem 0.9375rem 1.75rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.ContentManager .btn:focus,
.ContentManager .btn.focus,
.ContentManager .btn.active.focus,
.ContentManager .btn.active:focus,
.ContentManager .btn:active.focus,
.ContentManager .btn:active:focus {
    outline: 0;
}
.ContentManager .btn.btn-circle {
    border-radius: 30px;
}
.ContentManager .btn.btn-round {
    border-radius: 2px;
}
.ContentManager .btn.btn-shadow {
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
}
.ContentManager .btn.btn-brand {
    background-color: #ff4c00;
    border-color: #ff4c00;
    color: #ffffff;
}
.ContentManager .btn.btn-brand:hover,
.ContentManager .btn.btn-brand:focus {
    background-color: #802600;
    border-color: #802600;
    color: #ffffff;
}
.ContentManager .btn.btn-brand.btn-outline {
    background: #fff;
    border-color: #ff4c00;
    color: #ff4c00;
}
.ContentManager .btn.btn-brand.btn-outline:hover,
.ContentManager .btn.btn-brand.btn-outline:focus {
    background: #ff4c00;
    border-color: #ffffff;
    color: #ffffff;
}

How is the browser showing the correct value for background-color but rendering a different color? Is there a better way to import external css files that are only used for a section of one component?