What is the best way to use media queries in react JSX?

JavaScript
1

I am building a blog using Gatsby.
I think that I’ll have to use media queries for the header.js file in there.

What’s the most easiest way to add media queries into the JS file??
Or I just add it into Layout.CSS??

Anyone who had experience please give me some suggestion.

33%20PM
33%20PM1920×1080 296 KB

2

I am not an expert but here is my input.

It really depends if you are using CSS-IN-JS or regular css. When I do CSS-IN-JS, I use styled-components library and add media queries to certain components one by one. But if you are doing css, then I would add media queries to each css that needs responsive changes.

3

I use CSS IN JS syntax.

I will try to write the code and paste here if something is wrong. (maybe not now but later)

4

Gl. Here is a snippet of what I did.

export const Header = styled.header`
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2rem;
  @media only screen and (max-width: 1200px) {
    flex-direction: column;
    justify-content: center;
  }
`;
1 Like
5

mine was a bit different:

import {Link} from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import Jumbotron from 'react-bootstrap/Jumbotron'

const Header = ({ siteTitle }) => ( 
  <header>
  <Jumbotron style={
    {background: `#fff5e8`,}
  }>
  <div style={
    {
      background: `#f47c48`,
      width: `28rem`,
      height:`4rem`,
      margin:`0 auto`,
      display:`flex`,
      justifyContent:`center`,
      alignItems:`center`,
    }
  }>
  <h1 style = {
    {
      margin: 0,
      fontFamily:`Montserrat`,
      letterSpacing: `.3rem`,
      fontWeight:300,
    }
  }>
  <Link to = "/"
  style = {
    {
      color: `white`,
      textDecoration: `none`,
    }
  }>
  {siteTitle}
  </Link></h1>
</div>


<p className="text-center" style={
  {
  margin:`2rem`,
  fontFamily:`Montserrat`,
  fontWeight:100,
  letterSpacing:`.1rem`,
  }
}>
  &lt;slowpacedcoding.com, a place where we can talk about coding, as well as some other stuff too./&gt;
</p>

  <blockquote className="blockquote text-center" style={
    {
      marginTop:`2rem`,
      fontFamily:`Montserrat`,
      fontWeight:300,
    }
  }>A Coding Blog Written By <a 
  
  style= {
    {
      color:`inherit`,
      padding:`.5rem`,
      transition:`all .3s`,
    }
  }

  href="https://github.com/zhouxiang19910319"
  target="_blank" rel="noopener noreferrer">Matt
  Zhou</a>.</blockquote>
</Jumbotron>
  
  
  </header>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

@media screen and (max-width:500px){
  header h1{
    letter-spacing: 0;
    font-size: 1.2rem;
    font-weight: 400;
  }

  #logo_wrapper{
    width: auto;
    height: auto;
  }

  #blog_info,#author_info{
    font-size: 1rem;
  }
}

…

6

Nice, as long as it works right? :slight_smile:

7

nah, I haven’t added those in yet. Later I’ll do it.