ReactJS 中的媒体查询答案

【问题标题】：media query in ReactJSReactJS 中的媒体查询
【发布时间】：2021-01-11 17:45:49
【问题描述】：

大家好，我有以下代码： my code

如你所见，我有“mystyle”，其中有 fontSize: 35px 和 color:"red"。

      const mystyle = {
        fontSize: "35px",
        color: "red"
      };

我还添加了 react-responsive 助手来设置 World 组件在 max-width 等于 600px 时可见。

    const isMobile = useMediaQuery({ query: "(max-width: 600px)" });
    return (
      <div>
        <div style={mystyle}> hello </div>
        {isMobile && <World />}
      </div>
   );

现在我的问题是：当 max-width 等于 600px 时，如何在我的“mystyle”中将 fontSize 更改为 20px 和 color 更改为 "blue" ？

【问题讨论】：

标签： reactjs media-queries

【解决方案1】：

const mystyle = {
        fontSize: "35px",
        color: "red"
      };

const mystyle2 = {
        fontSize: "20px",
        color: "blue"
      };

    <div style={isMobile ? mystyle2 : mystyle}> hello </div>

【讨论】：