Css 将附加类名添加到自定义组件

我想知道如何向自定义React组件添加额外的类名，比如按钮。到目前为止，我已经尝试了使用

class1${class2}

甚至

classnames

的传统方法，但没有成功

以下是我尝试的示例：

从“React”导入React；
从“react dom”导入react dom；
从“类名”中导入类名；
导入“/styles.css”；
常量按钮测试=道具=>{
//const className=`正在测试的按钮是渐变${props.className？props.className:''}`；
const className=类名称(
“按钮正在测试渐变cv”，
props.className
);
log（“a:，类名）；
如果（props.href）{
返回(
);
}
返回(
{props.children}
);
};
函数App（）{
返回(
按钮链接
违约
按钮链接-完整
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

谢谢，

---

D

发生这种情况的原因是，在将

className

属性赋予组件之后，您正在传播

道具

因此，
DEFAULT
将尝试渲染

<button className={className} {...props}> 

请参见
您能详细描述一下您的问题吗？问题是当我尝试添加更多类时，似乎定义的类
按钮正在测试的是渐变cv
被更新的替换，我的示例中的预期结果是所有按钮组件都应该有边框，由于
。正在CSSthanks中测试
，感谢您快速清晰的解释，我为没有注意到我将
…道具放在首位的顺序而感到羞愧。第二个建议对我来说是新的，我会尝试一下。非常感谢你
<button className={className} {...props}> 

<button className={className} className={"aaa is-block"}>

<button {...props} className={className} >

const ButtonTest = ({className:passedClasses, ...props}) => {
  const className = classNames(
    "button is-testing is-gradient cv",
    passedClasses
  );
  console.log("a:", className);

  if (props.href) {
    return (
      <a href={props.href} className={className} {...props}>
        {props.children}
      </a>
    );
  }

  return (
    <button className={className} {...props}>
      {props.children}
    </button>
  );
};