css - 如何根据媒体查询更改按钮的文本

Question

如果媒体查询是，我想将文本“继续付款”更改为“立即购买”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>

标签： cssreactjssassstyled-components

Answer 1

可能的解决方案

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

解决方案

反应

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