CODEWITHSUNDEEP
reactjsmedia-queries
Vardan Hambardzumyan
Vardan Hambardzumyan

Reputation: 277

media query in ReactJS

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 ?

Upvotes: 1

Views: 64

Answers (1)

Dor-Ron
Dor-Ron

Reputation: 1807

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

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

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

Upvotes: 2

Related Questions