Cascading Style Sheets in Native

In this lesson, you will learn how to build a predictable, structured approach to style inheritance in your React Native component tree.

Understanding the "Cascading" Myth

In traditional web development, CSS "cascades," meaning a style applied to a parent element automatically propagates down to all its children. In React Native, styles do not cascade. If you define a color: 'red' or fontSize: 20 on a parent View, those styles stay strictly within that View. They do not reach the Text components nested inside.

While this might seem like a limitation, it is actually a design choice that ensures your components remain modular and predictable. However, when building complex UIs, we still need a "structured approach" to avoid repeating the same styles hundreds of times.

The Structured Approach: Style Composition

Since styles don't flow down automatically, we create structure through Style Composition. Instead of relying on inheritance, we define "Global Styles" or "Theme Objects" and pass them explicitly.

Consider this example of a structured container:

const theme = {
  textBase: { fontSize: 16, color: '#333' },
  container: { padding: 20, backgroundColor: '#f9f9f9' }
};

const UserCard = () => (
  <View style={theme.container}>
    <Text style={theme.textBase}>Name: John Doe</Text>
    <Text style={[theme.textBase, { fontWeight: 'bold' }]}>Status: Active</Text>
  </View>
);

Why this is better

By using an array (e.g., [theme.textBase, { fontWeight: 'bold' }]), we achieve the effect of inheritance without the hidden side effects of CSS.

1. Explicit Intent: You always know exactly where a style comes from by looking at the component’s style prop.
2. Component Isolation: If you move your UserCard to a different part of the app, it brings its logic with it, rather than depending on a parent View higher up in the tree to provide its formatting.
3. Array Merging: React Native allows you to pass an array of style objects. The last style in the array wins, allowing you to easily override base styles with component-specific tweaks.

Key Takeaway: In React Native, styles must be explicitly passed down; use style composition and shared theme objects to maintain consistency across your component tree.