I've been working on a React.js web app with Material UI components. The challenge I'm facing is with one specific component that handles the website management and displays a preview of custom content. This website, unlike the rest of the app, utilizes Bootstrap and Font Awesome for styling, which I import in the HTML preview along with our website's CSS directly within the JSX of this component (I've masked the import paths).
https://i.sstatic.net/bi8Hi.png
I also attempted to import these files within an SCSS file rather than directly in the JSX and then imported the SCSS file using ES6 within the preview component, but unfortunately, I encountered the same issue.
In the preview section, the CSS styles are not being applied correctly in the browser. I've tried testing it on both Chrome and Edge, but the problem persists. Numerous elements on the page lack proper styling, like this button that should be displayed in orange:
https://i.sstatic.net/hWnfF.png
In Chrome's computed styles, the correct hex value #ff4c00 for the background-color shows up (although the RGB equivalent seems incorrect). Interestingly, the RGB value changes upon each reload and sometimes appears accurate. Nevertheless, regardless of the precise RGB value, the button always turns out blue with an orange border.
https://i.sstatic.net/tg06h.png
The classes assigned to the button include: btn btn-brand btn-round mr-2 mb-2 align-bottom.
Below are the CSS rules affecting 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 it possible for the browser to display the correct background-color value while rendering a different color? Is there a more effective method to import external CSS files solely for a specific part of one component?