React自定义Button组件新增自定义className不生效如何解决？

问题原因 #

• 你的自定义Button组件没有在参数中接收外部传入的className属性，导致传入的类名被丢弃
• 内部<button>元素没有将默认类名和外部传入的类名做合并
• 额外注意：现有代码中onClick参数被误写为全小写的onclick，会导致点击事件无法正常触发

解决方法 #

修改Button组件代码，接收className参数并合并到内部元素的类名中：

import React from 'react'; 
import './Button.css';
import { Link } from 'react-router-dom';

// 解构参数时新增className，设置默认值为空字符串避免未传时出现undefined
export const Button = ({ children, type, onClick, className = '' }) => {
    return (
        <Link to="/" className="btn-mobile">
            {/* 合并默认类名btn和外部传入的className */}
            <button className={`btn ${className}`} onClick={onClick} type={type}>
                {children}
            </button>
        </Link> 
    )
}

如果你的需求是将额外类名加在外层Link元素而非内部button上，只需将合并后的类名放到Link的className属性即可：

<Link to="/" className={`btn-mobile ${className}`}>

修改后你外部调用传入的className就会正常生效，按钮的类名会变为btn ticket。

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