如何在Tailwind中使用Props变量改写组件样式？

步骤1：删除原有CSS文件 #

直接移除你提供的.star相关CSS代码，所有样式将通过Tailwind类实现。

步骤2：改写组件中的StarIcon类名 #

先把原CSS样式对应到Tailwind的工具类：

• 原.star的margin-left:10px → Tailwind的ml-2.5
• 原.size-l的width/height:16px → Tailwind的w-4 h-4
• 原.size-m的width/height:10px → Tailwind的w-2.5 h-2.5

然后修改组件代码，通过映射对象处理不同size值对应的类：

export function Raiting ({ stars, size = 'm' }: Props) {
  // 定义size到Tailwind类的映射
  const sizeClassMap = {
    m: 'w-2.5 h-2.5',
    l: 'w-4 h-4'
  };

  const getStars = () => {
    const starsArray = [];
    for (let i = 0; i < stars; i++) {
      // 组合基础样式和尺寸样式
      starsArray.push(<StarIcon key={i} className={cn('ml-2.5', sizeClassMap[size])} />);
    }
    return starsArray;
  };

  return <div>{getStars()}</div>;
}

注意事项 #

如果你的Tailwind版本未默认启用小数间距单位（比如旧版），需要在tailwind.config.js中扩展配置：

module.exports = {
  theme: {
    extend: {
      spacing: {
        '2.5': '10px',
      },
    },
  },
};

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