SwiftUI: How do I remove system colored frames from items in my list view?

Question

I have refactored and reorganized my code over 30 times and I'm sitting here absolutely stumped. I have no idea how to remove the little system colored frames around each item in my list view. They look terrible and would love to set them to clear but no matter where I set a color parameter or modifier I am unable to resolve the issue. I checked this website a few times but was unable to find a post specific to this issue.

I have included a screenshot of the issue as well as the code. I think the screenshot makes it pretty self explanatory:

Here is the code responsible for this list:

                ZStack {
                    if ingredients.isEmpty && colorScheme == .light {
                        Color(.systemGray6)
                            .cornerRadius(10)
                            .shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 2)
                            .edgesIgnoringSafeArea(.all)
                    } else {
                        List {
                            ForEach(ingredients, id: \.self) { ingredient in
                                IngredientRowView(ingredient: ingredient) {
                                    removeIngredient(ingredient)
                                }
                            }
                            .onDelete { indices in
                                ingredients.remove(atOffsets: indices)
                            }
                        }
                        .listStyle(InsetGroupedListStyle()) // Add list style
                        .background(Color.clear)
                        .cornerRadius(10)
                        .shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 2)
                    }
                }

This is the remaining code:

struct IngredientRowView: View {
    let ingredient: String
    let onDelete: () -> Void
    
    var body: some View {
        HStack {
            Text(ingredient)
                .font(.body)
                .padding(.leading, 8)
                .foregroundColor(.primary)
            
            Spacer()
            
            Button(action: onDelete) {
                Image(systemName: "minus.circle")
                    .resizable()
                    .foregroundColor(.gray)
                    .frame(width: 14, height: 14)
            }
            .buttonStyle(BorderlessButtonStyle())
        }
        .padding(.vertical, 8)
        .background(VisualEffectView())
        .cornerRadius(8)
        .padding(.horizontal, 16)
        .shadow(color: Color.black.opacity(0.1), radius: 4, x: 0, y: 2)
    }
}

struct VisualEffectView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIVisualEffectView {
        UIVisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterial))
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {}
}

Answer 1

Perhaps you are looking for listRowBackground?

Apply this modifier to each of the list rows, i.e. IngredientRowView:

IngredientRowView(ingredient: ingredient) {
    ...
}
.listRowBackground(Color.clear)