Styling React components

There are several effective ways to style React components, each with its own advantages and use cases. Below is an overview of the most common methods along with examples.

Inline Styling

Inline styling allows you to apply styles directly to JSX elements using JavaScript objects. This method is useful for dynamic styles that depend on component state or props.

Example:

1const InlineStyledComponent = () => {
2  const styles = {
3    backgroundColor: 'lightblue',
4    padding: '20px',
5    borderRadius: '5px',
6  };
7
8  return (
9    <div style={styles}>
10      <h1>Hello, Inline Styling!</h1>
11    </div>
12  );
13};

CSS Stylesheets

You can create a separate CSS file for your styles and import it into your component. This method is straightforward and keeps your styles organized.

Example:

App.css

1.container {
2  background-color: #282c34;
3  color: white;
4  padding: 40px;
5  text-align: center;
6}

App.js

1import React from 'react';
2import './App.css';
3
4const App = () => {
5  return (
6    <div className="container">
7      <h1>Hello, CSS Stylesheet!</h1>
8    </div>
9  );
10};

to add SCSS to the React project, just install the dependency using npm

1npm install sass --save-dev

CSS Modules

CSS Modules allow you to write modular CSS that is scoped locally to the component, preventing naming conflicts. You create a .module.css file and import it into your component.

Example:

styles.module.css

1.bigblue {
2  color: DodgerBlue;
3  padding: 40px;
4  font-family: Arial;
5}

Component.js

1import React from 'react';
2import styles from './styles.module.css';
3
4const Component = () => {
5  return <h1 className={styles.bigblue}>Hello, CSS Modules!</h1>;
6};

Styled-Components

Styled-components is a popular library that allows you to write CSS directly in your JavaScript files using tagged template literals. This approach promotes component-level styling.

Example:

1import React from 'react';
2import styled from 'styled-components';
3
4const StyledDiv = styled.div`
5  background-color: lightblue;
6  padding: 20px;
7  border-radius: 5px;
8`;
9
10const StyledComponent = () => {
11  return (
12    <StyledDiv>
13      <h1>Hello, Styled-Components!</h1>
14    </StyledDiv>
15  );
16};

CSS-in-JS Libraries

Similar to styled-components, other libraries like Emotion and JSS allow you to write CSS in JavaScript, providing dynamic styling capabilities.

Example with Emotion:

1/** @jsxImportSource @emotion/react */
2import { css } from '@emotion/react';
3
4const style = css`
5  background-color: lightgreen;
6  padding: 20px;
7`;
8
9const EmotionComponent = () => {
10  return (
11    <div css={style}>
12      <h1>Hello, Emotion!</h1>
13    </div>
14  );
15};

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that enables you to apply styles directly in your JSX using predefined classes.

Example:

1const TailwindComponent = () => {
2  return (
3    <div className="bg-blue-500 text-white p-4 rounded">
4      <h1>Hello, Tailwind CSS!</h1>
5    </div>
6  );
7};

Conclusion

Each styling method has its own strengths:

Inline Styling: Great for dynamic styles but can become unwieldy.
CSS Stylesheets: Simple and effective for static styles.
CSS Modules: Prevents naming conflicts and scopes styles locally.
Styled-Components: Promotes component-level styling with dynamic capabilities.
CSS-in-JS Libraries: Offers powerful styling options within JavaScript.
Tailwind CSS: Provides a utility-first approach for rapid UI development.

Choosing the right method depends on the specific needs of your project, team preferences, and the complexity of the styles involved.

Table of Contents