Great question—this is a super common pain point when building React apps where multiple components end up using the same class names. Let's walk through the most practical solutions tailored to your setup (React with Less):

1. Use CSS Modules (Recommended for Most Cases) #

If you're using Create React App or a modern React setup, CSS Modules are enabled by default, and they work seamlessly with Less. They automatically scope your styles to the component by generating unique class names under the hood.

How to implement it: #

• Rename your Less files to use the .module.less suffix (e.g., home.less → home.module.less, about.less → about.module.less)
• Import the styles as a module in your component, then reference the class via the imported object

Modified Home Component Example:

import React, { Component } from 'react';
import styles from './home.module.less'; // Import as a module

class Home extends Component {
  render() {
    return (
      <div className={styles['header-container']}>
        {/* Or use camelCase if you rename the class to headerContainer in your Less file */}
        <h1>Home</h1>
      </div>
    );
  }
}

Corresponding home.module.less:

.header-container {
  background: #f0f0f0;
  padding: 20px;
  /* Your styles here */
}

CSS Modules will generate a unique class name like home-module_header-container__abc123 for the Home component, and a different one for About, so no conflicts.

2. Leverage Less Nesting (Simple, No Tooling Changes) #

Since you're already using Less, you can use its nesting feature to scope styles to a unique parent class for each component. This is a great option if you don't want to switch to CSS Modules.

How to implement it: #

• Add a unique root class to your component (e.g., home-component for Home, about-component for About)
• Nest your shared class names inside this root class in your Less file

Home Component Example:

import React, { Component } from 'react';
import './home.less';

class Home extends Component {
  render() {
    return (
      <div className='home-component'> {/* Unique root class */}
        <div className='header-container'>
          <h1>Home</h1>
        </div>
      </div>
    );
  }
}

home.less:

.home-component {
  .header-container {
    background: #f0f0f0;
    padding: 20px;
    /* Your styles here */
  }
}

Repeat this pattern for the About component with about-component as the root class—now the .header-container styles are only applied when inside their respective component's root class.

3. CSS-in-JS (For Maximum Flexibility) #

If you want to take styles even further and tie them directly to your components, CSS-in-JS libraries like styled-components or Emotion are excellent choices. They generate scoped styles automatically, and you can write dynamic styles directly in your component code.

Example with styled-components: #

First install the library:

npm install styled-components

Home Component Example:

import React, { Component } from 'react';
import styled from 'styled-components';

// Create a styled component with scoped styles
const HeaderContainer = styled.div`
  background: #f0f0f0;
  padding: 20px;
  /* Your styles here (you can even use Less-like nesting if needed) */
`;

class Home extends Component {
  render() {
    return (
      <HeaderContainer>
        <h1>Home</h1>
      </HeaderContainer>
    );
  }
}

No more class name conflicts—each styled component gets a unique generated class name, and styles are fully isolated to the component.

4. Scoped CSS (With a Plugin) #

If you prefer a Vue-like scoped CSS experience in React, you can use a plugin like react-scoped-css. This lets you keep your normal Less files, and automatically scopes styles to the component.

Quick Setup: #

1. Install the plugin:

npm install react-scoped-css --save-dev

2. Rename your Less files to .scoped.less (e.g., home.scoped.less)
3. Import it normally in your component—the plugin will handle the rest

Home Component Example:

import React, { Component } from 'react';
import './home.scoped.less';

class Home extends Component {
  render() {
    return (
      <div className='header-container'>
        <h1>Home</h1>
      </div>
    );
  }
}

The plugin will add a unique attribute to your component's elements and modify your Less styles to target only those elements, preventing cross-component conflicts.

Which One Should You Choose? #

• CSS Modules: Best all-around choice if your setup supports it (most modern React projects do)
• Less Nesting: Quick fix if you want to stick with your current workflow without adding new tools
• CSS-in-JS: Perfect if you need dynamic styles or want to keep styles and components tightly coupled
• Scoped CSS: Good if you're used to Vue's scoped style approach

内容的提问来源于stack exchange，提问作者Shawn