Four ways to Style React Components

Styling Components in React

There are four ways to style React components. They are :

CSS StyleSheet
Inline Styling
CSS Modules
styled-components

CSS Stylesheet

When the program is big and complex, then you can use CSS Stylesheet with different className in the React file to keep it understandable and distinguishable. Here is an example below.

import React from 'react';
import './Style.css';

const Box = () => (
  <div className="container">
    <p className="content">Get started with CSS styling</p>
  </div>
);

export default DottedBox;

The above file is a ReactJS file, and below is the style.css file.

.container {
  margin: 40px;
  border: 5px dotted pink;
}

.content {
  font-size: 15px;
  text-align: center;
}

Inline Styling

In React inline styling is not specified as a string, instead they are specified with an object whose key is camelCased, version of style name and value is a string. The example is given below.

import React from 'react';

const divStyle = {
  margin: '40px',
  border: '5px solid gray'
};
const pStyle = {
  fontSize: '15px',
  textAlign: 'center'
};

const Box = () => (
  <div style={divStyle}>
    <p style={pStyle}>Inline style</p>
  </div>
);

export default Box;

The above file is the ReactJs file along with its inline styling. Also we could pass the values directly, as shown below.

import React from 'react';


const Box = () => (
  <div style={{margin: '40px',border: '5px solid pink'}>
    <p style={{fontSize: '15px',textAlign: 'center'}>Get started with inline style</p>
  </div>
);

export default Box;

CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

import React from 'react';
import styles from './Style.css';

const Box = () => (
  <div className={styles.container}>
    <p className={styles.content}>Get started with CSS Modules style</p>
  </div>
);

export default Box;

After we import the styles.css file, we access className as we access an object.

:local(.container) {
  margin: 40px;
  border: 5px dashed pink;
}
:local(.content) {
  font-size: 15px;
  text-align: center;
}

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]' 
}
. . .

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. They are quite popular among developers and used a lot to avoid to make another .css file and it is to remove any cluster caused by inline styling if it is have many lines of code.

Steps to install and use before implementation:

npm install styled-components
create a variable by selecting a particular html element where we store our style keys const Div = styled.div`color: gray`
Then we use the name of our variable as a wrapper <Div></Div> kind of react component.

import React from 'react';
import styled from 'styled-components';

const Div = styled.div`
  margin: 40px;
  border: 5px outset gray;
  &:hover {
   background-color: yellow;
 }
`;

const Paragraph = styled.p`
  font-size: 15px;
  text-align: center;
`;

const Box= () => (
  <Div>
    <Paragraph> styled-components </Paragraph>
  </Div>
);

export default Box;

Conclusion

All these four styling options of React Components ultimately achieve the same results. All have its pros and cons. It all comes down to personal developer preference and the complexity of your application.

Styling Components in React

CSS Stylesheet

Inline Styling

CSS Modules

Styled Components

Related