The “Menu” component and its subcomponents are rendered using the default style provided by the system, which may not be overridden. I suggest you create a custom MenuView, for example:
struct CustomMenu: View {
let items: [String]
let onSelect: (String) -> Void
@Binding var isExpanded: Bool
var body: some View {
VStack(alignment: .leading, spacing: 10) {
ForEach(items, id: \.self) { item in
Button(action: {
self.onSelect(item)
self.isExpanded.toggle()
}) {
Text(item)
.font(.system(size: 60)) // Set your custom font size here
.foregroundColor(.black)
}
}
}
.padding()
.background(Color.white)
.cornerRadius(5)
.shadow(radius: 5)
.frame(maxWidth: .infinity, alignment: .leading)
}
}
And you can use it like this:
struct Sample: View {
@State private var selectedIndex: Int = 0
@State private var isMenuExpanded: Bool = false
private var inputs = ["1", "2", "3", "4", "5"]
var body: some View {
VStack {
Button(action: {
self.isMenuExpanded.toggle()
}) {
HStack {
Text("Select Option")
.font(.system(size: 20))
Image(systemName: "arrow.down")
.rotationEffect(.degrees(isMenuExpanded ? 180 : 0))
}
}
if isMenuExpanded {
CustomMenu(items: inputs, onSelect: { selectedItem in
if let index = inputs.firstIndex(of: selectedItem) {
selectedIndex = index
}
}, isExpanded: $isMenuExpanded)
}
Spacer()
Text("Selected: \(inputs[selectedIndex])")
.font(.system(size: 30))
}
.padding().frame(width: 500, height: 500)
}
}