如何修改MenuBarExtra标签的文本颜色？

在macOS的SwiftUI中，MenuBarExtra的label样式会被系统默认样式强制覆盖，导致常规的SwiftUI文本颜色修饰符（如.foregroundColor(.red)）或直接使用AttributedString都无法生效。要让标签里的文本和SF Symbol图标同步显示为红色，可通过包装NSTextField的方式绕过系统样式限制。

解决方法 #

创建一个遵循NSViewRepresentable的自定义文本视图，直接用AppKit的NSTextField控制文本属性：

struct ColoredMenuBarText: NSViewRepresentable {
    let text: String
    let color: NSColor
    let font: NSFont
    
    func makeNSView(context: Context) -> NSTextField {
        let textField = NSTextField()
        textField.stringValue = text
        textField.font = font
        textField.textColor = color
        // 移除边框和背景，匹配SwiftUI Text的外观
        textField.isBezeled = false
        textField.drawsBackground = false
        textField.isEditable = false
        textField.isSelectable = false
        textField.sizeToFit()
        return textField
    }
    
    func updateNSView(_ nsView: NSTextField, context: Context) {
        nsView.stringValue = text
        nsView.font = font
        nsView.textColor = color
        nsView.sizeToFit()
    }
}

修改后的完整代码 #

将原代码中无效的Text(AttributedString(...))替换为自定义视图，同时简化SF Symbol的颜色设置：

MenuBarExtra {
    Text("Hello.")
        .padding(12)
} label: {
    HStack(spacing: 4) {
        // 简化SF Symbol颜色设置
        Image(systemName: "moon.stars.fill")
            .font(.system(size: 16, weight: .light))
            .foregroundColor(.red)
        
        // 使用自定义文本视图
        ColoredMenuBarText(
            text: "Hello, world!",
            color: .red,
            font: .systemFont(ofSize: 16, weight: .light)
        )
    }
}

原理说明 #

MenuBarExtra的label属于系统菜单栏区域，SwiftUI原生Text会被系统样式优先级覆盖；而直接使用AppKit的NSTextField可以完全控制文本的颜色、字体等属性，不受系统样式约束。

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