Media query syntax for Reactjs. You cannot set media queries inline. You will need to create a separate CSS stylesheet and then import the stylesheet.
So the following code would go in a new styles.css file for example.
1 2 3 4 5 6 7 8 9 | text-align: right; /* media queries */ @media (max-width: 767px) { text-align: center; } @media (max-width: 400px) { text-align: left; } } |
Then you can import your new CSS styles file into your react file. For example, you could add import ‘./styles.css’ to the top of your App.jsx file (assuming they are both at the root level), or you could import it directly into a specific react component file.
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
