Metronic with PrimeNg library
Hi! I'm ușing Metronic (Angular version) and i installed PrimeNg. All good until i found ouț that primeng styles are override by bootstrap reboot css within metronic styles. How can i make PrimeNg on top of that? I tried with layers, but not working.
Can you help me?
Thanks în advance!
Replies (4)
Using CSS layers can help manage the order of your styles. Ensure that PrimeNG styles are loaded after Bootstrap's reboot CSS.
@block blast
Hi Ana
To switch PrimeNG themes with Metronic's theme mode switcher:
Include both dark and light PrimeNG theme files in Angular.json.
Dynamically change the <link> tag for PrimeNG themes based on the mode selected.
Example:
switchTheme(theme: "dark" | "light") {
const themeLink = document.getElementById("primeng-theme") as HTMLLinkElement;
themeLink.href = theme === "dark"
? "path-to-dark-theme.css"
: "path-to-light-theme.css";
}Add the PrimeNG theme link in index.html:
<link rel="stylesheet" href="path-to-light-theme.css">This approach will allow PrimeNG and Metronic to switch between dark and light modes simultaneously.
Thanks for fast replying. I have one more question. I need to implement in the theme mode switcher of Metronic a switch for primeng template too (dark/light css files) . How do i switch css if they are loaded via angular.json?
Hi Ana Sorlea
You can try the following approaches:
1. Load PrimeNG Styles After Bootstrap Styles
Check that PrimeNG styles are loaded after the Bootstrap Reboot and other Metronic styles in the angular.json file:
"styles": [
"src/styles.css",
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/saga-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]PrimeNG styles should be listed after the Bootstrap styles to override conflicting rules.
2. Use View Encapsulation
In Angular, you can use ViewEncapsulation to encapsulate component styles and avoid unwanted style overrides. Add the following line in the component decorator of the component where PrimeNG styles are being overridden:
import { ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-example",
templateUrl: "./example.component.html",
styleUrls: ["./example.component.css"],
encapsulation: ViewEncapsulation.None // Disables Angular"s CSS encapsulation
})
