ModifiedContent<
    ModifiedContent<
        ModifiedContent<
            ModifiedContent<
                ModifiedContent<
                    Text,
                    _FrameLayout
                >,
                _BackgroundStyleModifier<AnyGradient>
            >,
            _ForegroundStyleModifier<Color>
        >,
        _EnvironmentKeyWritingModifier<Optional<Font>>
    >,
    _ClipEffect<RoundedRectangle>
>

What it represents

Text
└── Frame
    └── Background
        └── ForegroundStyle
            └── Font
                └── ClipShape (RoundedRectangle)

image.png

Modifier Order & ForegroundStyle

1. Modifier Order

Example

VStack {
    Text("Button")
        .bold()
        .frame(width: 200, height: 50)
        .background(Color.blue)

    Text("Button")
        .frame(width: 200, height: 50)
        .background(Color.blue)
        .bold()
}
.foregroundStyle(.white)

Key Concept

Modifiers wrap views, not modify them directly.

View → Modified View → Modified View → ...

Behavior

Even with the same modifiers:

Different order → different result