Styling without inheritance

Much of how we think about using CSS on the Web is predicated upon the concept of inheritance. We as web developers have built up many best practices that assume inheritance from the html container all the way down the DOM tree. As an example in CSS, we'll often define several styles on the html or body elements such as color, font-family, or font-size. By default, these definitions will be inherited by the entire subtree, making it easy to establish a baseline. With this basic example, this approach feels clean and relatively straightforward. However, as your CSS grows, all these inherited styles and conflicting rules can make styling larger applications unpredictable and difficult to scale.

React Native takes a different approach to styling. Rather than applying the same inheritance model as CSS, React Native styles are almost entirely scoped to the elements where they are applied. This encourages a different approach to styling your application. Rather than...