⚛️ Focused Styling in React and refactoring of Mobx

Are you using React on the project with an external theme? Read more theming of for React, some hints for mobx without decorators and more.

This article is for anyone who is

  • working with React
  • is planning to start working with React in the near future
  • likes practical examples ❤️
  • uses Mobx
Photo by Alice Achterhof on Unsplash


Unqualified styling can create the worst technical debt possible. Try to write a minimum of new styles as possible.

  • 🚨style only using class name selectors!
  • 🚧do not nest selectors!
  • 🚨use class names that start with “.js-” for javascript functionality never for styling

Rules for theming and Styling with CSS, SCSS

Mobile first

  • Style simple components to take a full width
  • Layout components should scale up elements as the viewport changes
  • Use only media query based on minimum viewport widths
    @media (min-width: ___px) { ... }
  • In SCSS prefer mixins for media queries from Bootstrap 4
    @include media-breakpoint-up(size){...} // is all you need to use


Employ component library like bootstrap. Use the provided components and make customization exclusively by changing Sass variables.

Any code is generally clearer and easier to maintain when it does not use globals, CSS styles are global

Components should own styles

Solution to global styles is to make write styles inside of every component using CSS in the JS library like styled-components or emotion.

Emotion is a library designed for writing CSS styles with JavaScript

Example of a component with styled components in defaultProps

Component design

Thinking in react way. A component should use data to render UI. Design simple components that do only one thing. Components used for Layout and styling should not know about the application model.

function (data) { return UI; }

🏗 Component Categories

🧱 The base styled components

  • Elements with styles

💅 Presentational components

  • Reusable components with Styles

🎁 Container presenter components

  • Customized Presentational Components that know about application Model

🎛 Container components

  • Only inject data and behavior to Container presenter components

Categorization of React Components

State management

⚛️React introduced Hooks

Hooks solve state management without an additional library.

Components should not misuse specific state management library

Consider a situation when the creator of mobx will make this project deprecated. If a project has components coupled with mobx, all the components will need to change, compared with only container components have a connection to the state using inject or connect function and the refactorings are much easier.

  • decorators make components harder to test
  • using store inside of the components requires to mock the whole store for testing
Instead, we should use inject and observer as a functions

👍 Benefits of using inject and observer functions:

you are not using generators that are not part of the Javascript specification. (🤯 Currently unstable proposal)

  • 🚀 the code is future proof, and you do not have to change anything when new generators are released

you can prepare data and actions inside of the inject

  • 🍀 you can work with simple, functional components
  • ♻️ your components will not know about the store and can be reused


Use of Lerna with yarn workspaces and packages generator

Consider use of a monorepo project with

  • eslint config with prettier
  • precommit and prepush hooks build in
  • create new packages using package generators
  • one command versioning with an automatic changelog
  • releasing of all packages with one command

Link to example project and link to generator folder in the project
The styleguide, eslint config could be moved into this repository and released from here. It can enable to develop common packages faster with the current setup and we can create smaller packages with little to no overhead.

More about how to create a simple generator:

How to use the hygen code generator

👏Clap, 👂follow for more awesome 💟#Javascript and ⚛️#React content.

⚛️ Focused Styling in React and refactoring of Mobx was originally published in ableneo Technology on Medium, where people are continuing the conversation by highlighting and responding to this story.