Media query syntax for Reactjs

Question

How do I do the following CSS media query in Reactjs?

.heading {   text-align: right;   /* media queries */   @media (max-width: 767px) {     text-align: center;   }   @media (max-width: 400px) {     text-align: left;   } } 

I tried the following but it throws a syntax error and fails to compile.

heading: {   textAlign: 'right',   @media (maxWidth: '767px') {     textAlign: 'center';   }   @media (maxWidth: '400px') {     textAlign: 'left';   } } 

Answer 1

You can make media queries inside React:

import React, { Component } from 'react';  class App extends Component {   constructor(props) {     super(props)     this.state = { matches: window.matchMedia("(min-width: 768px)").matches };   }    componentDidMount() {     const handler = e => this.setState({matches: e.matches});     window.matchMedia("(min-width: 768px)").addEventListener('change', handler);   }   render() {     return (       <div >       {this.state.matches && (<h1>Big Screen</h1>)}       {!this.state.matches && (<h3>Small Screen</h3>)}       </div>     );   } }  export default App; 

https://stackblitz.com/edit/react-cu8xqj?file=src/App.js

---

09-10-2021 Edit: replaced addListener with addEventListener as former was deprecated. Thanks to John Galt for letting us know by posting a comment.