Блог

Главная - Вопросы по программированию - Как я могу заставить мой компонент React Button обновлять CSS только на определенной странице?

Как я могу заставить мой компонент React Button обновлять CSS только на определенной странице?

#reactjs

#reactjs

Вопрос:

Итак, я создал этот компонент button, используя следующий код

       const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];

      const SIZES = ['btn--medium', 'btn--lar&e'];

      const DISPLAY = ['btn--show', 'btn--hidden'];

      export const Button = ({
        children,
        type,
        onClick,
        buttonStyle,
        buttonSize,
        buttonDisplay
      }) =&&t; {
        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='/si&n-up'&&t;
            <button
              className={`btn ${checkButtonStyle} ${checkButtonSize} ${checkButtonDisplay}`}
              onClick={onClick}
              type={type}
            &&t;
              {children}
            </button&&t;
          </Link&&t;
        );

Итак, у меня есть этот компонент button внутри моего компонента navbar, а также у меня есть он внутри компонента раздела моей домашней страницы.

Моя проблема в том, что всякий раз, когда я уменьшаю страницу до mobile, я хочу, чтобы компонент button на панели навигации отображал: none, а затем в разделе home я хочу, чтобы он отображался

В итоге получается так, что, поскольку это компонент, любой стиль CSS, который я добавлю к нему, перейдет на любую другую страницу, использующую компонент, так что в основном моя кнопка исчезает в разделе домашней страницы, когда мне нужно ее отобразить

Я попытался добавить идентификатор к компоненту button, но это не сработало

   <Button id='nav-btn' buttonStyle='btn--outline'&&t;
        SIGN UP
      </Button&&t;

и я не знаю, как бы я добавил пользовательский класс или идентификатор к кнопке navbar, не применяя его ко всем другим компонентам button на моей домашней странице

Ответ №1:

Скройте это выражением, например, { showButton amp;amp; <Button /&&t; }. если showButton значение true, вы увидите кнопку, если нет, то ее не будет.

Если вы хотите сделать это с помощью CSS, используйте медиа-запрос, чтобы установить display: none , на каком размере экрана он должен исчезать.

Отредактируйте в ответ на комментарий

 @media (max-hei&ht: 960px) {
    display: none;
}

Который гласит: «Если высота меньше 960px , установите это свойство».

Если вам нужна «специальная» кнопка, которая скрывается на экране определенного размера, создайте компонент более высокого порядка, который закрывает вашу кнопку.

 const NinjaButton =&&t; () =&&t; {
    // do stuff
    return <Button cssOverrideProp={cssWithMediaQueryThatHides} /&&t;
}

В Button вы можете условно применить этот css,

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

Затем вы можете использовать эту кнопку везде, где она должна скрываться.

Комментарии:

1. итак, я написал некоторый код, который позволяет мне добавить определенный класс, который показывает или скрывает кнопку, но теперь моя проблема заключается в том, что она исчезает только при 960px. Я не уверен, как реализовать этот код

2. Исчезает меньше , чем 960 пикселей?

3. да, потому что прямо сейчас у меня есть этот код ` <Button buttonDisplay=’btn—hidden’ ButtonStyle =’btn—outline’&&t;` и в основном моя логика заключается в том, что если у кнопки есть значение buttonDisplay, установите его равным btn—hidden , но оно скрывает его на любом размере экрана, поэтому мне нужно, чтобы оно скрывалось только на экране размером меньше 960 пикселей

4. но как мне добавить определенный медиа-запрос css к компоненту button, который имеет классы по умолчанию? потому что idk, как настроить таргетинг только на компонент navbar button? Когда я выполнял медиа-запрос, он скрывал все кнопки на моем сайте, а не ту, которую я хочу

5. проверьте код, который я добавил выше. Он показывает мою логику для моего компонента button, и прямо сейчас я добавил свойство checkButtonDisplay , но моя проблема в том, что оно скрывает кнопку на всех экранах и Idk, как написать код, чтобы она исчезла только на 960px