React includes a built-in way to style your components — all React components that render DOM elements accept a
style prop, which sets the style attributes on a DOM element directly. We call these inline styles, just like we do in HTML.
This is a common and powerful way to style components; it doesn't required any libraries, it works with every platform-specific renderer (web, native, etc), and it can by fully dynamic (computed based on component
Notice how we're able to change the color of our
render function, so that we don't constantly create new objects (which can trigger unnecessary re-renders).
The main downside of this approach is that we can't use many of the CSS features for dynamic styles — pseudo classes (
Another downside is that we don't get vendor prefixing out of the box, although there are several libraries that solve this problem, prefixing our style objects before we pass them into the
style attribute of a component.
- Built-in (no libraries/dependencies)
- Dynamic (variables, themes, merging, etc)
- Component styles live in the same file as code and behaviors
- Works on every React renderer (web, native, etc)
- No CSS features (psuedoclasses, media queries, keyframe animations) out of the box
- No vendor prefixing out of the box
- New naming scheme / syntax to learn (camel-cased styles, with numbers or strings as values)