4 ways to style React components: a detailed guide

🛠️ 4 ways to style React components — a detailed and clear guide

React offers several effective approaches to component styling that vary in convenience, complexity, and scalability. In this article, we will consider each approach in detail, show examples of use and give recommendations that will help you choose the best option.

🔹 1. CSS files

The most common and familiar approach, in which styles are stored in separate CSS files. This allows you to separate the logic of the component from its appearance.

✅ Advantages:

• Ease of use and support.

• Ease of separating styles by components.

⚠️ Disadvantages:

• Class name conflicts are possible in large projects.

✏️ Example:

import './DottedBox.css';

<div className="dotted-box">Привет, мир!</div>

🔹 2. Inline styles

Inline styles allow you to set the design directly in the JSX code of the component. This is convenient for small applications and quick changes.

✅ Advantages:

• Fast development and convenience for minor edits.

• There is no need to create a separate file.

⚠️ Disadvantages:

• It can complicate support and readability when scaling.

• Limited reusability of styles.

✏️ Example:

// Through a variable
const boxStyle = { color: 'pink', padding: '10px' };
<div style={boxStyle}>Привет!</div>

// Or directly
<div style={{ color: 'pink', padding: '10px' }}>Привет!</div>

🔹 3. CSS Modules

CSS modules are CSS files with a local scope of classes. This avoids conflicts in class names and makes the code more maintainable.

✅ Advantages:

• Complete isolation of styles.

• Convenient support for large applications.

⚠️ Disadvantages:

• A little adjustment is required.

✏️ Example:

import styles from './DashedBox.module.css';

<div className={styles.box}>Привет!</div>

📌 Important:

• Use :local(.className) with Create React App.

• If you have your own config, use .className.

🛠️ Webpack setup:

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

🔹 4. Styled Components 💅

Styled Components is a popular library that allows you to use CSS directly in JavaScript. It allows you to write dynamic styles and makes the components very flexible.

✅ Advantages:

• Dynamic styling based on props and state.

• Good style isolation and theming support.

⚠️ Disadvantages:

• The need to study an additional library.

• May increase the size of the package.

✏️ How to use:

npm install styled-components --save

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: pink;
  padding: 10px;
`;

<StyledDiv>Привет!</StyledDiv>

🚀 Additional tips and recommendations

• Experiment with each method on small projects to understand their features.

• Use emojis and comments for better code readability.

• Try to maintain unity of styles within a single project.

• Explore tools for optimizing styles, such as PostCSS and preprocessors (Sass, Less).

The choice of approach depends on the specifics of your project and your personal preferences. The main thing is to keep the code clean and maintainable.

Good luck with your development! 🚀😃