Я хочу изменить текст «перейти к оплате» на «Купить сейчас», если медиа-запрос 767px

 const CheckoutButton = styled(GreenButton)
    text-transform: none;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-weight: 500;
    height: 40px ;
    font-size: 1rem;
    padding: 6px 20px !important;
    margin-left: 100px;
 

<CheckoutButton disabled={isSubmitting || disabled} onClick={handleSubmit} type="submit">Proceed to Payment</CheckoutButton>

В чистом CSS вы можете добавить метку кнопки с помощью псевдоэлемента:

 .testbutton::before {
  content: 'buy now';
}

@media (min-width: 767px) {
  .testbutton::before {
    content: 'proceed to payment';
  }
} 

 <button class='testbutton'></button> 

При этом я не в восторге от наличия метки кнопки в CSS. В React у меня всегда есть «uiStore», который позволяет компонентам отслеживать размер экрана и точки торможения, если они должны. Тогда у вас может быть что-то вроде:

 const CheckoutButton = props => {
  const { layout } = uiStore
  return (
    <button>
      {layout === 'mobile' ? 'Buy now' : 'Proceed to payment'}
    </button>
  )
}
 

Возможное решение

Добавление / удаление встроенных текстовых элементов в соответствии с медиа-запросом

Решение

Реагировать

<CheckoutButton disabled={isSubmitting || disabled} onClick={handleSubmit} type="submit"><span className="desktop-text">Proceed to Payment</span><span className="mobile-text"></span></CheckoutButton>

CSS

.mobile-text {display: none;} @media screen and (max-width: 767px) {.desktop-text {display: none;}.mobile-text {display: inline-block;}