7 Ways to Inherit Styles Using Styled Components

An in-depth look at styled-components coding techniques

Image by author

styled-components is a popular library to style React applications, with over four million weekly downloads. It adopts the CSS-in-JS approach, which bundles each JavaScript component with all its belonging CSS rules and dependencies. Combined with code splitting, it only loads the least amount of code necessary.

In styled-components, CSS styles are written as custom React components. It is easy to track which components are unused or undefined during compilation. It improves code manageability, comparing class names or other ways. Since it is CSS in JavaScript, it enables dynamic styling with programming capability.

In a previous article, we have introduced what styled-components is and how to use it. We have been using styled-components for a number of years, and often, we create components extending from the existing components. In this article, we are going to explore how to inherit/share styles using styled components.

• Configure shared styles at parent level
• Create global styles for app
• Use extended styled components
• Use composed CSS props
• Use interpolate function to compute style values
• Use interpolate function to compute CSS props
• Create styled components with style objects

Set Up Styled Components in Create React App

We use Create React App as a base to explore styled-components. The following command creates a React project:

% npx create-react-app react-styled-components
% cd react-styled-components

Set up styled-components:

npm i styled-components

styled-components becomes part of dependencies in package.json: