如何让React按钮组件在不同父组件中独立设置CSS样式？

这个问题我之前也碰到过，核心就是要给不同场景下的Button组件加上专属标识，这样就能精准控制样式啦！下面给你一步步讲怎么实现：

第一步：修改Button组件，支持自定义类名/ID #

你之前给Button传id没生效，是因为组件本身没有接收这个props并传递给内部的<button>元素。我们需要给组件添加接收自定义类名和ID的props，把它们绑定到实际的DOM按钮上：

const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];
const SIZES = ['btn--medium', 'btn--large'];
const DISPLAY = ['btn--show', 'btn--hidden'];
export const Button = ({ 
  children, 
  type, 
  onClick, 
  buttonStyle, 
  buttonSize, 
  buttonDisplay,
  className, // 支持传入自定义类名，符合React常规写法
  id // 支持传入自定义ID
}) => {
  const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0];
  const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
  const checkButtonDisplay = DISPLAY.includes(buttonDisplay) ? buttonDisplay : DISPLAY[0];
  
  // 合并所有类名：基础样式 + 组件预设样式 + 自定义类名
  const combinedClasses = `btn ${checkButtonStyle} ${checkButtonSize} ${checkButtonDisplay} ${className || ''}`;

  return (
    <Link to='/sign-up'>
      <button 
        className={combinedClasses} 
        onClick={onClick} 
        type={type}
        id={id} // 绑定自定义ID到按钮
      >
        {children}
      </button>
    </Link>
  );
}

第二步：在Navbar中使用时传入专属标识 #

现在你在Navbar组件里调用Button时，就可以传入专属的类名或ID了，比如：

// Navbar组件内的Button调用
<Button 
  id="navbar-signup-btn" 
  buttonStyle="btn--outline"
  className="navbar-btn" // 可选，类名和ID选一个用就行，类名更适合样式控制
> 
  SIGN UP 
</Button>

而首页区块的Button就保持原来的调用方式，不用加这些专属标识：

// Home Section组件内的Button调用
<Button buttonStyle="btn--primary">
  GET STARTED
</Button>

第三步：用CSS媒体查询隐藏Navbar中的按钮 #

最后写一段CSS媒体查询，针对移动端断点（比如768px，你可以根据自己的需求调整）隐藏Navbar里的按钮：

/* 移动端断点，根据你的项目设计调整 */
@media (max-width: 768px) {
  /* 用ID选择器 */
  #navbar-signup-btn {
    display: none !important;
  }

  /* 或者用类选择器，推荐用类，因为类可以复用 */
  .navbar-btn {
    display: none !important;
  }
}

加!important是为了确保这个样式能覆盖组件本身的btn--show样式，如果你的样式优先级足够高，也可以不用。

这样就能完美实现：移动端时Navbar里的按钮隐藏，首页的按钮正常显示，而且不会影响其他地方的Button组件使用～

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