React中如何正确将父组件类名嵌套应用到子组件

类名字符串拼接时未添加空格分隔两个类名，最终生成的是无效的单一类名，导致样式匹配失败。
原写法const classes = 'card' + props.className;在父组件传入className="expense-item"时，最终渲染到div上的class属性值为cardexpense-item：

• 无法匹配Card组件CSS中定义的.card通用样式
• 无法匹配父组件CSS中定义的.expense-item业务样式
  自然不会出现预期的样式效果。

直接在拼接时给基础类名后补一个空格，分隔两个独立类名即可：

function Card(props) {
    // 注意'card'后保留空格，分隔不同类名
    const classes = 'card ' + props.className;
    
    return (
        <div className={classes}>
            {props.children}
        </div>
    )
}

export default Card

如果要兼容未传入className的边界场景（避免生成多余尾部空格），可以用数组过滤后拼接的写法，鲁棒性更强：

function Card(props) {
    const classes = ['card', props.className].filter(Boolean).join(' ');
    
    return (
        <div className={classes}>
            {props.children}
        </div>
    )
}

修正后最终渲染的div会同时携带card和expense-item两个类名，两个文件中定义的对应样式都会正常生效。

额外排查提示：如果修正后样式仍未生效，检查父组件的CSS文件是否在文件顶部正确导入，避免漏引样式文件导致规则未加载。

内容的提问来源于stack exchange，提问作者अंशुल