Tailwind/Twin-macro/Styled Components className覆盖优先级异常问题

• 技术栈使用 styled-components、twin-macro、Tailwind CSS 开发自定义 Section 组件，默认样式定义在 StyledSection 常量中，初始实现代码如下：

import tw, { styled } from "twin.macro";

const Section = (props) => {
    return (
        <StyledSection
            className={props.className}
            style={{ backgroundImage: `url(${props.backgroundImage})` }}
        >
            {props.children}
        </StyledSection>
    );
};

const StyledSection = styled.section(tw`py-20 bg-no-repeat bg-cover bg-center`);

export default Section;

• 组件预期能力：支持调用方传入自定义类名覆盖默认样式，预期调用方式如下：

<Section className="my-override-class" />

• 实际问题：渲染时 styled-components 生成的类优先级更高，传入的自定义类样式无法生效。
• 问题根源：styled-components 默认拼接类名的顺序为「外部传入className + 组件自身生成className」，同级CSS规则遵循「后定义的优先级更高」原则，因此默认的Tailwind样式会始终覆盖外部传入类的样式。

方案1：调整类名拼接顺序（推荐，组件侧通用适配） #

通过 styled-components 的 attrs 方法调整最终渲染到DOM的类名顺序，把默认样式类放在前面，外部传入类放在后面，无需修改调用方代码，无论传入的是Tailwind工具类还是自定义原生CSS类都能正常覆盖。
修改后的StyledSection定义如下：

const StyledSection = styled.section.attrs(({ className }) => ({
  // 调整类顺序：默认样式在前，外部传入类在后，过滤空值避免无效类名
  className: [tw`py-20 bg-no-repeat bg-cover bg-center`, className].filter(Boolean).join(' '),
}))``;

组件其余逻辑保持不变即可，原有调用方式无需任何修改。

方案2：使用Tailwind重要前缀（临时覆盖场景适用） #

如果只是个别场景临时需要覆盖样式，不想修改组件源码，可以在传入的Tailwind类名前加!前缀，给样式加上!important标记强制生效，示例：

{/* 传入的!py-10会强制覆盖默认的py-20样式 */}
<Section className="!py-10" />

该方案仅适合零散的临时覆盖需求，若要组件长期支持自定义类覆盖，优先选择方案1。

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