Introduction

How To Apply Styling On React Components
React supports four types of options to style components.
CSS Stylesheet
You can simply define CSS into a separate file and then you just need to import in the component file. You can even create a separate component file rather than merging all CSS into one.
When a React application is made of complex CSS Modules or regular, CSS stylesheets is recommended.
  1. .container {
  2. margin: 40px;
  3. border: 5px dotted pink;
  4. }
  6. .center {
  7. font-size: 15px;
  8. text-align: center;
  9. }
  1. import React from 'react';
  2. import './style.css';
  4. const App = () => (
  5. <div className="container">
  6. <p className="center">Get started with CSS styling</p>
  7. </div>
  8. );
  10. export default App;
CSS Modules
A CSS Module is a CSS file with all class names and animation names are scoped locally.

We import the CSS file import styles './style.css'
  1. :local(.container) {
  2. margin: 40px;
  3. border: 5px dashed pink;
  4. }
  5. :local(.center) {
  6. font-size: 15px;
  7. text-align: center;
  8. }
  1. import React from 'react';
  2. import styles from './style.css';
  4. const App = () => (
  5. <div className={styles.container}>
  6. <p className={styles.center}>Getting started with CSS styling</p>
  7. </div>
  8. );
  10. export default App;
In case you're configured with webconfig.js file, then you can add below code into webconfig file so that it handles the styling of your local component.
  1. {
  2. test: /\.css$/,
  3. loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
  4. }
Inline styling
As the name suggests, in a React application, it's not similar to HTML inline styling string. In the React app, the styling property is not similar to a simple CSS property, we need to define it in camelcase.
  1. import React from 'react';
  3. const divStyle = {
  4. margin: '10px',
  5. border: '2px solid pink'
  6. };
  7. const pStyle = {
  8. fontSize: '15px',
  9. textAlign: 'center'
  10. };
  12. const Dialog = () => (
  13. <div style={divStyle}>
  14. <p style={pStyle}>Configured inline style</p>
  15. </div>
  16. );
  18. export default Dialog;
Styled-components
Styled-components is a component-level style that is a combination of JavaScript and CSS.

To use this library, we need to install the package first.
  1. npm install styled-components --save or yarn add styled-components
To use Style-component, please see the below snippet.
  1. import React from 'react';
  2. import styled from 'styled-components';
  4. const Div = styled.div`
  5. margin: 20px;
  6. border: 2px outset pink;
  7. &:hover {
  8. background-color: green;
  9. }
  10. `;
  12. const Paragraph = styled.p`
  13. font-size: 10px;
  14. text-align: center;
  15. `;
  17. const DialogBox = () => (
  18. <Div>
  19. <Paragraph>Styling with styled-components</Paragraph>
  20. </Div>
  21. );
  23. export default DialogBox;

Summary

All these were ways of styling React components. You can choose any of the options based on your requirements and preferences.