I have a big app that has its own styles and a ton of components. I downladed the CoreUi dashboard template to make my own dashboard, so im using their custom components to print some data from the database into graphs, tables, etc etc. There are lots of info and work on the dashboard and they make a good dat analysis of the app itself.
The problem is that when importing ONLY the dashboard and its styles, the styles are being installed globally (ofc). I know how CSS works and that a workaround would be neccesary or it.
Im using React and I need to know how to put the dashboard to ONLY have the coreui styles (as they are the dashboard is the only thing that is really from CoreUi and corrupts my styles)
So, what I found is that I could do: Dashboard.js component
import '../../scss/style.scss'
return (
<>
<div id="dashboard" className="dashboard" style={{ padding: '20px' }}>
And have the styles.scss file be:
#dashboard {
// If you want to override variables do it here
@import "variables";
$enable-ltr: true;
$enable-rtl: true;
// Import CoreUI for React components library
// Import Chart.js custom tooltips styles
@import "@coreui/chartjs/scss/coreui-chartjs";
@import "layout";
@import "example";
// If you want to add custom CSS you can put it here.
@import "custom";
@import "~@coreui/coreui/scss/coreui";
}
(wrapping it with #dashboard or .dashboard)
Finally, the coreui.scss (which contains the problems styles) are:
@import "mixins/banner";
@include bsBanner("");
// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "maps";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
//@import "tables";
@import "forms";
//@import "buttons";
@import "transitions";
@import "dropdown";
//@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
//@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";
@import "avatar";
@import "callout";
@import "footer";
@import "header";
@import "icon";
@import "sidebar";
@import "subheader";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
// scss-docs-end import-stack
Doing this effectively makes the coreui components only apply to the Dashboard.js component without conflicting other parts of my App. The sizes and organization are all working.
The problem is that the colors are not. It seems I cant just do ./#dashboard{import something} because its not valid css... So I want to know how to import the colors (so i dont have to style them myself, which is a big task), or Just the correct way to ONLY import the styles to my Dashboard. Another thing I thinked of was just look up the specific component styles and create my own copying them, but they were more complex than I expected and couldnt find exactly where they were being set for each component(the colors).
The funny part is the only conflicting components (that im using) are the tables and containers (the rest I can just comment them as they are not used on the Dashboard)
Ok I found the workaround. I keep the import statements under the .dashboard or #dashboard and just inspect in browser for the root colors that were supposed to be applied to the app by coreui.
Then, on the same file (after .dashboard{randomImport} just copy paste all the colors of the :root.
this will could make problems with color naming conventions, but coreui colors are unique (--cui--(color)) so I dont think I will have additional problems.