React components with multiple styles and best practices

The choice of the right React component style method is not static, but depends on the specific use case, personal preferences, and architectural goals. This article will discuss several commonly used React component style methods, analyze their advantages and disadvantages, and ultimately recommend the best solution.

Target:

• Global namespace
• Dependencies
• Reusability
• Scalability
• Dead code elimination

Style method:

• Inline CSS
• Normal CSS
• CSS in JS library
• CSS module
• Sass & SCSS
• Less
• Stylable

Inline CSS

• Dependencies: None
• Difficulty: Simple
• Review: Worst

Inline CSS writes styles directly to HTML or JSX elements. Although easy to implement, it has poor reusability and scalability.

Example:

import React from "react";

const spanStyles = {
  color: "#fff",
  borderColor: "#00f"
};

const Button = props => (
   style={{
    color: "#fff",
    borderColor: "#00f"
  }}>
     style={spanStyles}>Button Name>
  >
);

Normal CSS

• Dependencies: None
• Difficulty: Simple
• Evaluation: Still OK

Ordinary CSS is a simple and straightforward approach, better than inline CSS, where styles can be multiplexed by multiple pages and elements. But in large projects, there is no unified style guide, which can lead to maintenance difficulties.

Example:

/* styles.css */

a:link {
  color: gray;
}
a:visited {
  color: green;
}
a:hover {
  color: rebeccapurple;
}
a:active {
  color: teal;
}

import React from "react";
import "styles.css";

const Footer = () => (
  >
    ? 2020
    <a> href="http://miracleart.cn/link/6b41fd33b36a1ce27fc0a3b8f9d8df4c"></a>Find me on Twitter>
  >
);

export default Footer;

CSS in JS

CSS in JS technology uses JavaScript to style, generate CSS, and add it to the DOM. It has style scope and dynamic style functionality, but introduces dependencies.

JSS

• Dependencies: react-jss
• Difficulty: Simple
• Review: Not bad

JSS allows styles to be written declaratively using JavaScript.

Example: (Omitted, the original example is longer)

Styled-Components

• Dependencies: styled-components
• Difficulty: Medium
• Review: Not bad

Styled-components Use tag template literals to style and create normal React components.

Example: (Omitted, the original example is longer)

CSS module

• Dependencies: css-loader
• Difficulty: Difficulty (requires Loader configuration)
• Review: Good

The CSS module avoids global scope problems by generating unique class names, but the configuration is relatively complicated.

Example: (Omitted, the original example is longer)

Sass & SCSS

• Dependencies: node-sass
• Difficulty: Simple
• Review: Best

Sass is a powerful CSS preprocessor with features such as variables, nested rules, and mixins, improving the maintainability and scalability of styles.

Example: (Omitted, the original example is longer)

Less

• Dependencies: less, less-loader
• Difficulty: Simple
• Evaluation: Good

Less is similar to Sass, but has a slightly different syntax.

Example: (Omitted, the original example is longer)

Stylable

• Dependencies: stylable, @stylable/webpack-plugin
• Difficulty: Difficulty
• Review: Good

Stylable is also a preprocessor that can scope component styles and has functions such as custom pseudo-classes.

Example: (Omitted, the original example is longer)

Practice and comparison

The author tried a variety of methods and finally thought that SCSS was the best choice.

Advantages of SCSS:

• Similar to CSS syntax, it is easy to learn.
• Supports functions such as variables, nesting, mixin and functions to improve code maintainability and reusability.
• Create React App supports out of the box.

Example of using SCSS: (Omitted, the original example is longer)

Summary

This article compares a variety of React component style methods and recommends SCSS as the best solution. As a CSS preprocessor, SCSS provides many powerful features that can significantly improve development efficiency and code quality.

FAQ: (Omitted, the original text contains detailed FAQ)

The above is the detailed content of Style React Components: 7 Ways Compared. For more information, please follow other related articles on the PHP Chinese website!