Principles

Styles are pure functions of your application state

Modern UI libraries such as React(new tab) provide neat APIs to implement the very basic concept of component-based views. Lee Byron(new tab) used to describe components, during his Render 2016(new tab) presentation, as the following:

(state) => view

This simple concept allows us to compose multiple components into a complex and dynamic UI while always keeping what is displayed in sync with our application state.
Yet a component does not only describe which information is displayed, but also how it is displayed. In general we use CSS to style our components by creating static selectors that again define a fixed set of style declarations. This approach totally works fine as long as you have a static UI which only updates its displayed data, but does not suit a dynamic UI which alters its appearance depending on data it receives.
If the view is a function of state, your CSS should be too, as it is part of your view.

(state) => style

Your styles are not just a static style declarations anymore. They can automatically adjust themselves to fit the displayed information at any point of time.
We call the relevant parts of the state properties, usually referred to as props.

const rule = (props) => ({
  fontSize: props.size + 'px',
  color: 'blue',
  lineHeight: props.lineHeight,
  display: 'flex',
})