CSS & Class Names

    Perhaps the most straightforward way to style components is with CSS. We can write CSS, optionally using any pre-processor or post-processor we'd like, and use the className attribute of our components to apply styles.

    We can acheive dynamic styles by choosing a different className based on component props, e.g. className={props.selected ? 'selected-class' : 'normal-class'}. We can also mix-and-match with inline styles, although combining the two approaches should be kept to a minimum or the code quickly becomes hard to follow.

    In summary:


    • All the power of CSS (feature-packed)
    • Straightforward (nothing new to learn, if you already know CSS)
    • Integrates well with non-React libraries that use class names for styling


    • All the problems of CSS (generally large and unmaintainable codebase)
    • Components are not self-contained in a single JavaScript file
    • DOM renderer only (no React Native)