Different ways to modify the style of a MenuItem component in PrimeNG

Seeking advice on customizing the look of a MenuItem in PrimeNG. Here's what I have attempted so far:

<p-menu [style]="{'width': '400px'}" #menuOpcoesLista popup="popup" [model]="opcoesListaCS" appendTo="body"></p-menu>

This is the function used to create items for the menu:

     this.opcoesListaCS = [
        {label: 'Approve', command: (event) => { this.approve() }},
        {label: 'Send email', command: (event) => { this.sendMail() }},
        {label: 'Details', command: (event) => { this.details() }}];

I've tried adding styling as per PrimeNG documentation, but it hasn't worked. Various formats and approaches like using classes were tested with no success.

Any insights on changing the color? The aim is to have the first item in green, the second in yellow, and the third in red.

cssangularprimeng

Answer №1

To customize the menu, make sure to include styleClass="menucus"

https://i.sstatic.net/6AUGz.png

Here is the template code: 

<h3>Popup</h3>
<p-menu #menu popup="popup" styleClass="menucus" [model]="items"></p-menu>
<button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>

Check out the component code below:

import { Component, OnInit } from '@angular/core';
import { MenuModule, MenuItem } from 'primeng/primeng';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
   items: MenuItem[];

    ngOnInit() {
        this.items = [{label: 'Approve', command: (event) => { this.approve() }},
        {label: 'Send email', command: (event) => { this.sendMail() }},
        {label: 'Details', command: (event) => { this.details() }}];
    }
    approve() {

    }
    sendMail() {

    }
    details() {

    }
}

Apply these CSS styles for customization: 

/deep/ .menucus ul li:nth-child(1) {
    background: green;
}
/deep/ .menucus ul li:nth-child(2) {
    background: yellow;
}
/deep/ .menucus ul li:nth-child(3) {
    background: red;
}

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

Applying styled text to a Node.js chat application

I developed a chat application using node.js which allows users to enter a username and send messages. The messages are displayed in a <ul> format showing "username: message". I was looking for a way to make the username appear bold and in blue color ...

javascriptjqueryhtmlcssnode.js

Exploring the integration of Tailwind CSS code within a basic HTML file for utilization in a React project

I have been incorporating Tailwind CSS code in my React projects, mostly within a CSS file using @apply. Now I am interested in transitioning to simple HTML with the Tailwind CDN. How can I make this switch seamlessly? Here is an example of what I current ...

htmlcssreactjstailwind-css

Having trouble adding animation to button element following the application of :after pseudo-element styling

I've been grappling with pseudo elements, but I just can't seem to make a simple button animation work using them. My goal is to have a panel move from bottom to top on hover. Similar to the button found on this page (1st row, 2nd button). From ...

htmlcss

Tips for implementing a dynamic value in the ng-style based on certain conditions

Is there a way to set a background-color conditionally using ng-style when the color value can be updated from $scope? These are the variables in my scope: $scope.someone = { id: '1', name: 'John', color: '#42a1cd' }; $scope ...

javascriptcssangularjs

Breaking the link from the image it is connected to using [middleman] css and html

My question is about an icon with a link attached to it. <%= link_to image_tag("infobutton_circle_blue.png") ,"http://redbullrecords.com/artist/awolnation/", :id => "about" %> After applying styles, the link may not work properly: <a id="abo ...

csshtmlsassmiddleman

Angular textbox with dynamic concatenated name functionality

Hello, I'm currently working with some code that looks like this: <div *ngFor="let phone of phoneList; let phIndx = index;"> <div class="peoplePhoneTxtDiv"> <input [disabled]="phone.disabled" class="peoplePhoneTxtBox" type="text" ...

angularhtmltypescriptangular5

Angular4 - Div with ngIf doesn't respond to click event

I'm attempting to add a click event to a specific div. Within this div, there is another div that is dynamically generated based on a Boolean condition that I receive as input. Unfortunately, in this case, the click event is only functioning when clic ...

htmlcssangular

Creating nested tables by assigning unique Div IDs to each table element

Can we utilize a straightforward JavaScript/jQuery function to nest elements inside table elements? For instance, every square comes with its own unique ID (A1, B7, C5). How can I use this ID to insert the checker image in any selected tile upon clicking? ...

javascriptjqueryhtmlcss

Creating a unique card component with React and custom Tailwind CSS styling

I am working on creating a project component using React: Despite my efforts, I have not been able to find the correct documentation for assistance. Additionally, I am facing challenges in utilizing next/image to ensure that it is the correct size. This ...

cssreactjsnext.jstailwind-css

ngx-select allows users to input a value

<ngx-select #drop [items]="dropdownReci" [(ngModel)]="values"> <ng-template ngx-select-option-not-found> No results found, <button (click)="add(drop.value)"><b>add it</b></button>. </ng-templ ...

angularangular6

Unable to override default styles with custom styles in React MUI 5

I've been attempting to replace the default MUI 5 Button styles with my custom styles using either withStyles or a className (created using makeStyles), but I'm running into an issue where the default styles take precedence over my custom ones. I ...

cssreactjsmaterial-uimakestyles

What steps can be taken to resolve the error involving the preflight request failing to pass the access control check?

I'm currently working with angular code in one VM and node code in another. I am trying to make an API call from the angular VM to the node VM, and I have already included the cors module. However, when making the API call, I keep encountering the fol ...

node.jsangularcors

Tips for adjusting the font size within the MUI TextField Label

I'm looking to adjust the label fontSize in the material ui TextField component. I've discovered the InputLabelProps property which has been helpful, but as shown in the image below, the label appears too cramped when focused. https://i.sstatic. ...

cssreactjsmaterial-uilabel

Initiating a post request to the express server

My service includes a function that retrieves the user's current location using latitude and longitude coordinates. I am attempting to send this information to my server in order to incorporate it into a query. However, my post request does not appear ...

angularexpresshttppost

Reducing Bootstrap Navigation Bar with a scrolling logo

Is there a way to make the fixed navbar shrink 50% when it starts scrolling? I've only come across text navbars, but I'm looking for one with a logo. Any suggestions would be greatly helpful. You can access the css and html from that link. ...

csstwitter-bootstrapnavbar

The resizing effect in jQuery causes a blinking animation

I would like to create a functionality where, when the width of .tabla_gs_gm surpasses the width of .content, .tabla_gs_gm disappears and another div appears in its place. While this is already working, there seems to be a screen flicker between the two d ...

javascriptjqueryhtmlcss

How do I ensure that my absolutely positioned element is centered in this specific scenario?

I've been working on centering an element within its parent container, and I'm having trouble ensuring it remains centered responsively. Here's what I have so far: HTML <div class="example"> <span class="element1">Element ...

htmlcss

Can content be easily added to the header section of numerous HTML files simultaneously, eliminating the need to access each file individually?

I'm facing a challenge where I have to include a stylesheet in numerous HTML files. It seems like such a tedious task to do it manually for each file. Are there any tools or solutions available that can assist me with this process? Or perhaps there ar ...

htmlcssstylesheet

Is the order in which properties are executed always the same in CSS rules?

Have you ever wondered about the way browsers handle CSS properties within the same rule? The topic of rules precedence has been discussed at length, but this specific question focuses on the execution order by the browsers. In my view, I have always assu ...

cssproperties

Ways to customize the alignment of nav-link items in Bootstrap 4

I am using Bootstrap 4 and have a set of three nav-link elements: <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Item1</a> </li> <li class="nav-item"> <a class="nav ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4