如何使用@media更改属性样式组件中的宽度
如何使用@media更改属性样式组件中的宽度
提问于 2021-11-25 01:41:53
我不确定他们叫什么，但我有一个组件，它把它的样式作为一个带有道具的对象。
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，也不知道如何实现我想要的。
回答 2
Stack Overflow用户
发布于 2021-11-25 02:39:06
与其传递样式对象，不如将类应用于组件以便于维护。它还可以为不同大小设备的width解决问题，因为你可以在它的css文件中为类添加媒体查询。
另一个建议是使用styled-components。它们为在组件文件中添加媒体查询提供了强大的支持。
Stack Overflow用户
发布于 2021-11-25 02:51:19
你可以使用'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}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70108838
复制相关文章
![java中page的对象,page对象[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/a9e4d8c8b8cf557af9ef77bab7a0a361.jpg)
相似问题
我应该在我的.csproj文件中修改哪个文件？
我应该在pyroCMS中更改哪个.htaccess文件？
我应该在哪个时区初始化QDateTime？
我应该在哪个源文件中定义函数
我应该在哪个对象上同步？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
