如何使用SCSS修改PrimeNG Panel Menu样式并将其颜色改为黑色

Got it, let's turn that PrimeNG Panel Menu into a sharp black-themed component! Since you already added a custom styleClass to your <p-panelMenu> element, we'll use that to target only this specific menu instance (so we don't mess up other Panel Menus in your app).

Here's the SCSS code you can drop into your component's stylesheet (or global styles if needed):

// Target your specific Panel Menu using the custom style classes you defined
.font-bold.text-xs.m-0.w-11 {
  // Main Panel Menu container
  .p-panelmenu {
    background-color: #000;
    border: none; // Remove default border for a cleaner look (optional)
  }

  // Header sections (the clickable expand/collapse areas)
  .p-panelmenu-header {
    background-color: #000;
    border-bottom: 1px solid #222; // Subtle divider between headers (optional)
    color: #fff; // White text for contrast
  }

  // Hover state for headers
  .p-panelmenu-header:not(.p-disabled):hover {
    background-color: #1a1a1a; // Slightly lighter black on hover
  }

  // Active (expanded) header
  .p-panelmenu-header.p-highlight {
    background-color: #333; // Dark gray for active state
  }

  // Expanded content area
  .p-panelmenu-content {
    background-color: #000;
    border-top: 1px solid #222; // Match header divider (optional)
  }

  // Individual menu items inside expanded panels
  .p-panelmenu-item {
    background-color: #000;
    color: #fff;
  }

  // Hover state for menu items
  .p-panelmenu-item:not(.p-disabled):hover {
    background-color: #1a1a1a;
  }

  // Active (selected) menu item
  .p-panelmenu-item.p-highlight {
    background-color: #333;
  }
}

Key Notes: #

• Target Specificity: Using your custom styleClass ensures these styles only apply to this exact Panel Menu, preventing unintended global changes.
• Color Adjustments: Feel free to tweak the hex values (like #1a1a1a or #333) to match your exact black shade preference.
• Optional Styles: The border properties are optional — remove them if you want a completely borderless black menu.
• ViewEncapsulation Fix: If you're using Angular's default view encapsulation and the styles don't apply, wrap the code in :host ::ng-deep (use sparingly to avoid breaking encapsulation):

  :host ::ng-deep .font-bold.text-xs.m-0.w-11 {
    // ... all the styles above ...
  }
  

That should give you a fully black-themed Panel Menu that matches your requirements!

内容的提问来源于stack exchange，提问作者user16558324