React中如何实现动态类名与属性样式？无需预定义全量CSS类

完全可以实现你想要的需求，下面分两种对应你提到的调用方式给出具体实现：

一、通过组件props直接传递样式参数（<Container p={25} m={10} />） #

1. 基础版：生成内联样式 #

这种方式简单直接，不需要动态创建CSS类，适合快速实现：

import React from 'react';

const Container = ({ p, m, children, ...rest }) => {
  const inlineStyles = {};
  if (p !== undefined) inlineStyles.padding = `${p}px`;
  if (m !== undefined) inlineStyles.margin = `${m}px`;
  
  return <div style={inlineStyles} {...rest}>{children}</div>;
};

// 使用示例
<Container p={25} m={10}>示例内容</Container>

2. 进阶版：自动生成CSS类并注入 #

如果想避免内联样式，自动生成复用的CSS类，可以通过CSSOM动态创建样式规则，同时用缓存避免重复生成：

import React, { useEffect, useRef } from 'react';

// 全局缓存已生成的样式类，避免重复创建
const styleClassCache = new Map();
// 全局样式表容器
const globalStyleSheet = document.createElement('style');
document.head.appendChild(globalStyleSheet);
const styleSheet = globalStyleSheet.sheet;

const Container = ({ p, m, className = '', children, ...rest }) => {
  const finalClasses = [className];
  const prevStyles = useRef({ p, m });

  useEffect(() => {
    // 样式参数未变化时跳过更新
    if (prevStyles.current.p === p && prevStyles.current.m === m) return;
    prevStyles.current = { p, m };

    // 处理padding类
    if (p !== undefined) {
      const cls = `p${p}`;
      if (!styleClassCache.has(cls)) {
        styleSheet.insertRule(`.${cls} { padding: ${p}px; }`, styleSheet.cssRules.length);
        styleClassCache.set(cls, true);
      }
      finalClasses.push(cls);
    }

    // 处理margin类
    if (m !== undefined) {
      const cls = `m${m}`;
      if (!styleClassCache.has(cls)) {
        styleSheet.insertRule(`.${cls} { margin: ${m}px; }`, styleSheet.cssRules.length);
        styleClassCache.set(cls, true);
      }
      finalClasses.push(cls);
    }
  }, [p, m]);

  return <div className={finalClasses.join(' ')} {...rest}>{children}</div>;
};

// 使用示例
<Container p={25} m={10} className="custom-class">示例内容</Container>

二、解析className中的简写类名（<Container className="p25 m10" />） #

这种方式需要解析传入的className，提取样式规则并动态生成对应CSS类：

import React, { useEffect } from 'react';

const styleClassCache = new Map();
const globalStyleSheet = document.createElement('style');
document.head.appendChild(globalStyleSheet);
const styleSheet = globalStyleSheet.sheet;

// 解析类名的工具函数，可扩展更多规则
const parseStyleClasses = (classNameStr) => {
  return classNameStr.split(' ')
    .filter(Boolean)
    .map(cls => {
      // 匹配padding规则：p+数字
      const paddingMatch = cls.match(/^p(\d+)$/);
      if (paddingMatch) {
        return { cls, rule: `padding: ${paddingMatch[1]}px;` };
      }
      // 匹配margin规则：m+数字
      const marginMatch = cls.match(/^m(\d+)$/);
      if (marginMatch) {
        return { cls, rule: `margin: ${marginMatch[1]}px;` };
      }
      // 可扩展其他规则，如pt20（padding-top:20px）、mb15（margin-bottom:15px）等
      return null;
    })
    .filter(Boolean);
};

const Container = ({ className = '', children, ...rest }) => {
  useEffect(() => {
    const parsedStyles = parseStyleClasses(className);
    // 只处理未缓存的类
    const newStyles = parsedStyles.filter(s => !styleClassCache.has(s.cls));
    newStyles.forEach(s => {
      styleSheet.insertRule(`.${s.cls} { ${s.rule} }`, styleSheet.cssRules.length);
      styleClassCache.set(s.cls, true);
    });
  }, [className]);

  return <div className={className} {...rest}>{children}</div>;
};

// 使用示例
<Container className="p25 m10 custom-class">示例内容</Container>

补充说明 #

• 动态生成CSS类的优势是样式可复用，避免内联样式的性能开销，适合大量组件实例的场景。
• 可以根据需求扩展解析规则，支持不同单位（如p2rem、m1.5em）、方向简写（pt、pb、ml、mr）等。
• 若不想自己实现，也可以用原子化CSS框架，它本身就提供了类似p-6、m-4这类预定义的原子类，本质和你想要的自动生成类逻辑一致，但无需自己写解析代码。

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