如何让我的 React Button 组件仅在特定页面上更新 CSS？

Question

所以我使用以下代码创建了这个按钮组件

      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
      }) => {
        const checkButtonStyle = STYLES.includes(buttonStyle)
          ? buttonStyle
          : STYLES[0];

        const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];

        const checkButtonDisplay = DISPLAY.includes(buttonDisplay)
          ? buttonDisplay
          : DISPLAY[0];

        return (
          <Link to='/sign-up'>
            <button
              className={`btn ${checkButtonStyle} ${checkButtonSize} ${checkButtonDisplay}`}
              onClick={onClick}
              type={type}
            >
              {children}
            </button>
          </Link>
        );

所以我的导航栏组件中有这个按钮组件，我的主页部分组件中也有它。

我的问题是，每当我将页面缩小到移动设备时，我想让导航栏中的按钮组件显示：无，然后在主页部分我希望它显示

最终发生的事情是，由于它是一个组件，我添加到它的任何 CSS 样式都会出现在使用该组件的任何其他页面上，所以当我需要它显示时，基本上我的按钮会在主页部分消失

我尝试向按钮组件添加一个 Id，但没有成功

  <Button id='nav-btn' buttonStyle='btn--outline'>
        SIGN UP
      </Button>

而且我不知道如何将自定义类或 id 添加到导航栏按钮而不应用到我主页上的所有其他按钮组件

Answer 1

用表达式隐藏它，例如{ showButton && <Button /> }. 如果showButton 为真，你会看到按钮，如果不是，你不会看到。

如果您想通过 CSS 完成此操作，请使用媒体查询将 display: none 设置在它应该消失的任何屏幕尺寸上。

根据评论进行编辑

@media (max-height: 960px) {
    display: none;
}

上面写着“如果高度小于960px，则设置此属性。”

如果您想要一个隐藏在屏幕尺寸上的“特殊”按钮，请创建一个包裹按钮的高阶组件。

const NinjaButton => () => {
    // do stuff
    return <Button cssOverrideProp={cssWithMediaQueryThatHides} />
}

在Button，你可以有条件地应用那个css，

className=`{/* your other css */ ${cssOverrideProp || ''}}`

然后，您可以在任何应该隐藏的地方使用该按钮。