如何使用 @media 更改 prop 样式组件的宽度

Question

我不确定他们是否叫什么，但我有一个组件，它的风格是 object 及其道具。

const PricingSection = ({
    secDesc,
}) => {

    return (
        <Text
            {...secDesc}
            content={intl.formatMessage({ id: 'packages.description' })}
        />
    );
};


PricingSection.propTypes = {
    secDesc: PropTypes.object
};

PricingSection.defaultProps = {
    secDesc: {
        width: '50%',
        m: 'auto',
        textAlign: 'center',
        pt: '20px',
        color: '#6a7a8d',
        lineHeight: '1.5rem',
    },
}

我想为移动设备应用不同的witdh 。 我知道如何在 css 中使用@media标签，但我不知道在这个组件中在哪里写@media或如何实现我想要的。

Answer 1

与其传递样式 object，不如将 class 应用于组件以方便维护。 它还可以解决不同尺寸设备的width问题，因为您可以在 css 文件中为 class 添加媒体查询。

另一个建议是使用styled-components 。 它们为在组件文件中添加媒体查询提供了很好的支持。

参考： styled-components

Answer 2

您可以使用“react-device-detect”并从父组件传递不同的宽度，如下所示：

enter code here
import isMobile from 'react-device-detect'
secDesc: {
   width: isMobile ? '50%' : 'your value',
   m: 'auto',
   textAlign: 'center',
   pt: '20px',
   color: '#6a7a8d',
   lineHeight: '1.5rem',
 }
 < PricingSection 
    secDesc={secDesc}
  />