How to customize the appearance of Menu items in SwiftUI?

Viewed 1014

I am creating a Menu where a user first selects a category and then a subcategory; I would like for each nested Menu label and Menu Button label to have a customized appearance. I've attempted to use the .background(Color.blue) modifier, but the only label to render the background appropriately is the outermost Menu.

How can I modify each nested Menu label and Menu Button label to have a custom background?

enter image description here

import SwiftUI

struct ContentView: View {
    var body: some View {
        DropDownMenu()
    }
}

struct DropDownMenu: View {
  private let categories: [Category]
  @State private var selectedSubcategory = "Select a category"
  
  let letters = ["a", "b", "c"]
  
  init() {
    self.categories = [Category(name: "letters", subcategories: letters)]
  }
  
    var body: some View {
      /* Category */
      Menu {
        /* Subcategory */
        Menu {
          Button {
            self.selectedSubcategory = categories[0].subcategories[0]
          } label: {
            Text("\(categories[0].subcategories[0])")
          }
          Button {
            self.selectedSubcategory = categories[0].subcategories[1]
          } label: {
            Text("\(categories[0].subcategories[1])")
          }
          Button {
            self.selectedSubcategory = categories[0].subcategories[2]
          } label: {
            /* Blue background does not render */
            Text("\(categories[0].subcategories[2])")
              .background(Color.blue)
          }
        }
        label: {
          /* Blue background does not render */
          Text("\(categories[0].name)")
            .background(Color.blue)
        }
      } label: {
        /* Blue background does render */
        Text("\(selectedSubcategory)")
          .foregroundColor(.black)
          .background(Color.blue)
      }
    }
}

struct Category: Hashable {
  var id = UUID()
  var name: String
  var subcategories: [String]
}
0 Answers
Related