4. Four ways to style react components

Agata Krzywda
codeburst
Published in
3 min readMar 22, 2017

This is the fourth part of my React tutorials. See the Intro to react.js here

There are four different options to style React components. All depend on your personal preferences and the specific complexity of your application.

If you want to add just a few style properties, then inline styling is the best option.

When you want to reuse your style properties in the same file then style-component are perfect.

When your application is more complex I recommend CSS Modules or regular CSS stylesheets.

1. CSS Stylesheet

  • Simply import css file import './DottedBox.css' so you can have a separate css file for each component.

2. Inline styling

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style’s value, usually a string.

  • We can create a variable that stores style properties and then pass it to the element like style={nameOfvariable}
  • We can also pass the styling directly style={{color: 'pink'}}

3. CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. Great article about css modules here.

  • Similar to css we import css file import styles './DashedBox.css'
  • then we access to className as we access to object

:local(.className)-this when you use create-react-app because of webpack configurations

.className-this if you use your own react boilerplate.

To make CSS modules work with Webpack you only have to include the modules mentioned above and add the following loader to your webpack.config.js file:

. . .
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .

4. Styled-components 💅

Styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS

  • First we need to install styled-components library
  • npm install styled-components --save
  • Now we can create a variable by selecting a particular html element where we store our style keys const Div = styled.htmlElemnet`color: pink`
  • Then we use the name of our variable as a wrapper <Div></Div> kind of react component:)
  • Tips to use emoji icons key shortcut CTRL+CMD+SPACE 💡

All these ways of styling react components have pros and cons.

It all boils down to both your own personal preferences and the specific complexity of your application.

I suggest you to make 4 projects, each using different way of style.

Enjoy 😃

Next tutorial The Component Lifecycle

✉️ Subscribe to Codeburst’s once-weekly Email Blast, 🐦 Follow Codeburst on Twitter, and 🕸️ Learn Full Stack Web Development.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Written by Agata Krzywda

Front-end developer. Love react.js and javascript.

Responses (47)

What are your thoughts?

I am about to start a react app and searching for how to use css in the app. Your article helped me a lot.
Thanks.

this article is very helpful.
When I use different CSS style sheets to style different components somehow the styling rules interfere with each other! Is this supposed to happen?

Very helpful, thank you!