如何在接收props样式的styled-components中使用@media修改width属性

你当前的组件是把样式以对象形式通过secDescprops传递给Text组件，根据你用的技术栈不同，有三种常见实现方式：

方案1：样式对象内直接写媒体查询（优先选） #

如果你用的是支持对象式媒体查询的CSS-in-JS方案（比如Emotion、Styled-Components对象写法、MUI的样式props），可以直接在secDesc的默认值里加媒体查询规则，不需要改动其他逻辑：

PricingSection.defaultProps = {
    secDesc: {
        width: '50%',
        m: 'auto',
        textAlign: 'center',
        pt: '20px',
        color: '#6a7a8d',
        lineHeight: '1.5rem',
        // 示例：768px及以下宽度的移动设备设宽度为90%
        '@media (max-width: 768px)': {
            width: '90%'
        }
    },
}

注意：如果Text组件是把secDesc直接转成原生行内style，这个方案不生效，因为原生行内样式不支持媒体查询，改用下面两种方案即可。

方案2：自定义类名+外部CSS写媒体查询 #

给Text组件加专属类名，在全局/模块CSS文件里写媒体查询覆盖宽度：

1. 修改组件代码：

const PricingSection = ({
    secDesc,
}) => {
    return (
        <Text
            {...secDesc}
            className="pricing-section-desc"
            content={intl.formatMessage({ id: 'packages.description' })}
        />
    );
};

2. 在CSS文件中添加规则：

@media (max-width: 768px) {
    .pricing-section-desc {
        width: 90% !important;
    }
}

方案3：JS监听视口宽度动态修改样式 #

如果不想写额外CSS，可以用hook监听视口宽度，动态拼接样式对象：

// 示例用了MUI的useMediaQuery，也可以自己用window.matchMedia实现监听逻辑
import { useMediaQuery } from '@mui/material';

const PricingSection = ({
    secDesc,
}) => {
    const isMobile = useMediaQuery('(max-width: 768px)');
    // 移动端拼接自定义宽度
    const finalSecDesc = {
        ...secDesc,
        ...(isMobile ? { width: '90%' } : {})
    };
    return (
        <Text
            {...finalSecDesc}
            content={intl.formatMessage({ id: 'packages.description' })}
        />
    );
};

内容的提问来源于stack exchange，提问作者erondem