media query in ReactJS

Question

Hi all I have following code: my code

As you see I have "mystyle" which have fontSize: 35px and color:"red".

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

Also I added react-responsive helper to set World component visible when max-width will equal to 600px.

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

Now my question is: How can I change fontSize to 20px and color to "blue" in my "mystyle" when max-width will equal to 600px ?

Answer 1

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

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

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