时间戳

首页 > 解决方案 > 如何在 Reactjs 中动态设置样式（响应、媒体查询、移动版）

reactjs - 如何在 Reactjs 中动态设置样式（响应、媒体查询、移动版）

问题描述

我有一个 Button 组件。由于按钮的填充可以不同，我希望它是动态的。

请检查组件。

const Button = ({children, padding="0.5rem"}) => {
   return(
      <button
         className={...}
         style={{ padding, ..style, ...dynamicStyle }}
         {...rest}>
         {children}
      </button>
   )
}

所以，我所做的是设置一个默认填充，它是 0.5rem，每当我在其他组件上设置不同的填充值时，我都会做这样的事情。

<Button padding="1.5rem 5rem" type="submit">Button</Button>

但是，当用户在移动设备上时，我想再次更改填充。（=当宽度小于一定尺寸时）有什么好办法解决这个问题吗？当然，我可以添加类来自定义填充，但我猜它太多了。

标签： reactjscomponents

解决方案

你可以试试这个

style={{height: this.props.width >= 1200 ? 'calc(100vh - 200px)' : 'calc(100vh - 80px)'

推荐阅读