Surface: first-class semantic container color API independent of elevation

Author: hristototovCreated Sep 14, 2026Updated Sep 14, 2026
Labelsfeature requestv6

Is your feature request related to a problem? Please describe.

Surface derives its background color directly from the numeric elevation prop (theme.colors.elevation.levelN), including in mode="flat" and during animated elevation changes. A component cannot express "this container is surfaceContainerLow, and elevation only controls the shadow". The only escape hatch is passing a raw color via backgroundColor, which loses the semantic intent and doesn't track the theme role. As components are modernized to MD3 (e.g. Menu in #5037, which the spec fills with surfaceContainer), each one has to invent its own workaround.

Describe the solution you'd like

A container prop on Surface accepting a semantic surface-family color role (surface, surfaceDim, surfaceBright, surfaceVariant, surfaceContainerLowestsurfaceContainerHighest, inverseSurface), resolved from the theme:

typescript
<Surface container="surfaceContainerLow" elevation={2} />

Source: callstack/react-native-paper