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 ?

Dor-Ron · Accepted Answer · 2023-01-17 01:25:48Z

2

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

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

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

edited Jan 17, 2023 at 1:25

answered Jan 11, 2021 at 9:45

Dor-Ron

1,8073 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

media query in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related