如何使用@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
复制相关文章
![wordpress子比主题更改首页样式全宽度[美化教程]](https://developer.qcloudimg.com/http-save/yehe-admin/29c974432e479e2d6c558ac38d83ec48.jpg)
相似问题
如何通过组件属性更改组件的样式？
如何使用样式组件更改react组件的样式
组件宽度属性的意外更改
如何使用样式化的组件onClick更改css属性？
如何在php中将img样式宽度更改为属性宽度
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
