未弹出create-react-app项目中，MaterialUI能否自定义Styled Components类名生成器？

Absolutely, you’re in luck! Styled Components has a direct equivalent to Material UI’s StylesProvider that lets you customize class names without ejecting your CRA project—meet the StyleSheetManager component. Here’s how to set it up step by step:

1. Use StyleSheetManager with a custom class name generator #

Wrap your root application component with StyleSheetManager and pass in a generateClassName function to control how class names are created. This works exactly like MUI’s approach, no Babel config changes needed.

Example implementation #

import { StyleSheetManager } from 'styled-components';
import YourAppContent from './YourAppContent';

// Custom function to generate readable class names
const generateCustomClassName = (tag, rule, sheet) => {
  // Adjust this format to fit your needs—add project prefixes, component names, etc.
  return `my-app-${tag}-${rule.key}`;
};

function App() {
  return (
    <StyleSheetManager generateClassName={generateCustomClassName}>
      <YourAppContent />
    </StyleSheetManager>
  );
}

export default App;

Breakdown of the generator function parameters: #

• tag: The HTML tag (like div) or React component name used in your styled component
• rule: The style rule object, where rule.key is the unique identifier for the style block
• sheet: The underlying stylesheet instance (you can use this for more advanced logic if needed)

2. Optimize for development vs production #

You’ll probably want more verbose class names in development for debugging, and shorter ones in production to keep bundle sizes small. Use CRA’s built-in environment variables to switch between them:

const generateCustomClassName = (tag, rule, sheet) => {
  if (process.env.NODE_ENV === 'development') {
    // Readable names for debugging
    return `dev-${tag}-${rule.key}`;
  }
  // Concise but still identifiable names for production
  return `prod-${rule.key.slice(0, 6)}`;
};

3. Combine with Material UI’s StylesProvider #

Since you’re using both Styled Components and Material UI, you can nest the two providers to ensure both libraries use custom class names:

import { StyleSheetManager } from 'styled-components';
import { StylesProvider } from '@mui/styles';
import YourAppContent from './YourAppContent';

// Custom class name generator for MUI
const muiClassNameGenerator = (componentName, styleSheet, ruleName) => {
  return `mui-${componentName}-${ruleName}`;
};

// Custom class name generator for Styled Components
const scClassNameGenerator = (tag, rule, sheet) => {
  return `sc-${tag}-${rule.key}`;
};

function App() {
  return (
    <StylesProvider generateClassName={muiClassNameGenerator}>
      <StyleSheetManager generateClassName={scClassNameGenerator}>
        <YourAppContent />
      </StyleSheetManager>
    </StylesProvider>
  );
}

export default App;

This setup keeps both libraries’ class names readable and distinguishable, all without ejecting your Create React App project.

内容的提问来源于stack exchange，提问作者András Geiszl