Overriding PrimeNG styles with Bootstrap _reboot.scss

I'm facing an issue where Bootstrap is overriding my PrimeNG styles, particularly with its _reboot.scss file. I have included the relevant parts where I referenced it in both my styles.scss and angular.json files. Interestingly, I noticed that this issue was resolved in a vanilla setup using just HTML, but not in an Angular environment.

Here's what I have at the top of my styles.scss:

@import 'modern-normalize/modern-normalize.css';
@import "bootstrap/dist/css/bootstrap.css";
@import 'bootstrap-icons/font/bootstrap-icons';
@import "primeicons/primeicons.css";
@import "primeflex/primeflex.css";
@import "primeng/resources/primeng.min.css";

And in my angular.json file, I have the following configuration for styles:

"styles": [
    "modern-normalize/modern-normalize.css",
    "bootstrap-icons/font/bootstrap-icons.css",
    "bootstrap/dist/css/bootstrap.css",
    "primeicons/primeicons.css",
    "primeflex/primeflex.css",
    "primeng/resources/primeng.min.css",
    "src/styles.scss",
    {
        "input": "src/theme-light.scss",
        "bundleName": "light",
        "inject": false
    },
    {
        "input": "src/theme-dark.scss",
        "bundleName": "dark",
        "inject": false
    }
],
htmlcsstwitter-bootstrapbootstrap-5primeng

Answer №1

It seems approval for my edits on @Kino101's solution Here is the complete answer that works after upgrading to primng >= 16.4

Now, PrimeNG CSS (primeng.min.css) is distributed as layers, resulting in a change in selectors priority.

Additional information can be found here.

An effective approach is to assign bootstrap a "layer" with lower precedence. To implement this, move both boostrap and primeng CSS references from the styles section of your angular.json file to your primary scss file as shown below:

styles.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css" layer(bootstrap);
@import "../node_modules/primeng/resources/primeng.min.css";

Following this step, it becomes essential to establish priority because adding the @layer tag to specify layer order in existing angular css/scss will be eliminated during Angular compilation. Create a CSS file named layer.css as illustrated below:

layer.css

Incorporate this file into your project assets folder (e.g., assets/styles/layer.css), ensuring it includes the following content.

@layer bootstrap, primeng;

To wrap up, import layer.css into the index.html file index.html

  ...
  <link rel="stylesheet" type="text/css" href="assets/styles/layer.css">
  ...

Answer №2

I encountered a similar issue and was able to resolve it by switching from regular css to the more powerful scss. I also made sure to import only a select few components from Bootstrap, disregarding the reboot file in the process.

_bootstrap.scss

// Adjustments and settings
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/variables-dark";
@import "node_modules/bootstrap/scss/maps";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";    

// Design elements & modules
@import "node_modules/bootstrap/scss/root";
//@import "node_modules/bootstrap/scss/reboot";

// Custom modifications can be added here (e.g. .table, .h1, ...)

// Design elements & modules
@import "node_modules/bootstrap/scss/containers";
@import "node_modules/bootstrap/scss/grid";
@import "node_modules/bootstrap/scss/tables";
@import "node_modules/bootstrap/scss/forms";

// Support functions
@import "node_modules/bootstrap/scss/helpers";

// Utility classes
@import "node_modules/bootstrap/scss/utilities/api";

_primeng.scss

@import 'node_modules/primeicons/primeicons.css';
@import "node_modules/primeng/resources/themes/saga-green/theme.css";
@import "node_modules/primeng/resources/primeng.css";

styles.scss

@import 'bootstrap';
@import 'primeng';

Answer №3

After updating my PrimeNG version to 16.4 or higher, I encountered a similar issue.

It seems that the PrimeNG CSS (primeng.min.css) is now distributed as layers, affecting the priority of selectors.

For more information, you can visit this link.

A workaround is to assign bootstrap a lower-level "layer". To do this, simply transfer the references for bootstrap and Primeng CSS from the styles section of your angular.json file to your main CSS file:

styles.css

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css" layer(bootstrap);
@import "../node_modules/primeng/resources/primeng.min.css";

Answer №4

Consider swapping out primeng with other styles at the top and test it out

@import "primeicons/primeicons.css";
@import "primeflex/primeflex.css";
@import "primeng/resources/primeng.min.css";
@import 'modern-normalize/modern-normalize.css';
@import "bootstrap/dist/css/bootstrap.css";
@import 'bootstrap-icons/font/bootstrap-icons';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically move to the latest message as soon as it is posted

After trying multiple codes and encountering issues, I am attempting to add my message in a textarea that will automatically scroll down. Even though I have my own codes, they don't seem to work properly. I also tried using the code provided Here. ED ...

javascriptjqueryhtmlajax

JS (jQuery) not working as expected - Laravel 8 integrated with Bootstrap 5 and jQuery

Having difficulty integrating bootstrap and jQuery with Laravel 8. Despite following multiple tutorials and meticulously following the steps, the buttons remain unclickable. It seems like the click function is not running at all. The app was initialized u ...

jquerylaravelbootstrap-5

Is there a way to initiate a jquery function upon loading the page, while ensuring its continued user interaction?

On my webpage, there is a JavaScript function using jQuery that I want to automatically start when the page loads. At the same time, I want to ensure that users can still interact with this function. This particular function involves selecting a link tha ...

javascriptjqueryhtmlcss

Show the date and time in a visually appealing way by using HTML and JavaScript in an HTA application with scrolling effects

I have the following JavaScript code to show the current date in the format Mon Jun 2 17:54:28 UTC+0530 2014 within an HTA (HTML application). Now, I would like to display it as a welcoming message along with the current system date and time: Mon Jun 2 17: ...

javascriptcsshtmlhta

What is the proper way to reference automatically generated class names within nested style rules when using makeStyles in Material-UI?

When using makeStyles, how can I reference generated classnames when creating nested rules? For instance, if I have a "container" class with nested "item" elements and I want to use the generated "item" class in the style definition. The approach that wor ...

csscss-selectorsmaterial-ui

Is it considered best practice to utilize iframes for the implementation of a header or navbar on a

Is it considered a best practice to utilize iframes for implementing a header/navbar? My website consists of approximately 5 thousand pages, all of which are static HTML (without the use of any content management system, PHP, etc). I am currently in the ...

html

What is the method to store and retrieve data attributes linked to elements such as select options within the React framework?

Despite my efforts, I'm currently unable to retrieve the data attribute from an option using React as it keeps returning null. <select onChange={(e) => this.onIndustryChangeOption(e)} value={this.props.selectedIndustry}> <opti ...

javascripthtmlreactjsecmascript-6

Is there a concept of negative margin "wrapping"?

I am currently working on the website . I am facing an issue where the left arrow is not appearing in the same position as the right arrow. When I try to mirror the same adjustment I made for the left arrow by using margin-left: -75px, it seems to 'wr ...

htmlcss

Is it possible to host three separate web pages within a single Firebase project on Firebase Hosting?

Imagine I have set up a project called ExampleApp on Firebase. I've designed a page with a form for users to submit data, hosted by Firebase. The Cloud Firestore database is storing this submitted data when the user completes the form and hits submit ...

htmlcssfirebasefirebase-authenticationfirebase-hosting

Navigate div containers interchangeably

Take a look at what I made: https://jsfiddle.net/1qsoL695/ This is the HTML code: <div class="container"> <div id="select"> <div>ONE</div> <div>TWO</div> <div>THREE</div> &l ...

jqueryhtmlcssswipe

Why doesn't the element I'm clicking return as expected?

Below is the code provided <!DOCTYPE html> <html> <body> <p id="demo">Demo Element</p> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $('#demo' ...

javascriptjqueryhtml

Css flex is not compatible with Safari, iPhone 5, and some mobile web browsers' webviews

All of the following code snippets are written in HTML: <div class="btn-toolbar text-center" role="toolbar"> <a href="#" class="btn btn-success">Link 1</a> <a href="#" class="btn btn-success">Link 11</a> < ...

ioscsswebviewsafariflexbox

The MUI Modal is too large for the display

I'm using a Modal component from MUI in my project and I am facing an issue with displaying a large JSON object inside the modal. The problem is, the top of the modal extends beyond the screen height and even after making it scrollable, I am unable t ...

cssreactjsmaterial-ui

Initiating the form with a query mark

Recently, I found myself in a disagreement with a colleague over the validity of a certain URL: <form action="?foo=bar" method="get"> According to him, using this URL can lead to troubles as the browser may struggle to correctly redirect to the int ...

htmlformsurl

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss

After saving a rich field in Microsoft Sharepoint, I noticed that a new "External Class" was automatically added to my CSS

Although I am new to Sharepoint, I have experience in HTML and CSS. I recently created a mini HTML application that changes the pictures of hyperlinks on hover. It works perfectly when run on a normal browser outside of Sharepoint. However, the issue aris ...

htmlcssclasssharepointexternal

Storing checkbox status in Angular 7 with local storage

I am looking for a way to keep checkboxes checked even after the page is refreshed. My current approach involves storing the checked values in local storage, but I am unsure of how to maintain the checkbox status in angular 7 .html <div *ngFor="let i ...

htmlangulartypescript

Issues with the styling of the side navigation bar

How can I center the paragraph content within the .main-content div located to the right of the side navigation? When I apply margin: 0 auto, nothing happens. I believe my CSS is incorrect, but I'm unsure how to correct it. Additionally, I would like ...

htmlcss

Creating and formatting HTML pages

Trying to expand my knowledge of HTML, I decided to experiment with some basic code. I selected what seemed like a straightforward layout from a website, saved the source onto my desktop, and made some slight modifications. When I opened the HTML file in a ...

htmlbrowser

Utilizing Host Styles in Angular2 Components

In the midst of developing a custom form component for my Angular project, I am facing challenges with styling. I wish to allow variable widths for the input element and have them controlled by the host component. For instance: <my-input class="input" ...

cssangular