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?
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]
}
