【问题标题】：how to change text of button based on media query如何根据媒体查询更改按钮的文本
【发布时间】：2021-04-28 23:20:36
【问题描述】：

如果媒体查询是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 reactjs sass styled-components

【解决方案1】：

在纯 CSS 中，您可以通过伪元素添加按钮的标签：

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

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

&lt;button class='testbutton'&gt;&lt;/button&gt;

话虽如此，我对在 CSS 中使用按钮标签并不感到兴奋。在 React 中，我总是有一个“uiStore”，它允许组件跟踪屏幕大小和刹车点（如果必须的话）。然后你可以有类似的东西：

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

【讨论】：

【解决方案2】：

可能的解决方案

根据媒体查询添加/删除内联文本元素

解决方案

反应

<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;}

【讨论】：