Hey developers! Sometimes, for small projects, we need to add styles for different screen sizes. We usually do this by making a new CSS file. But if we only need to write a few lines of code, does it make sense to create a whole new file?

This is where Radium steps in. It's a handy React tool that simplifies writing inline media queries. Using this, we can display styles like pseudo-selectors and more.

Many developers are familiar with the Radium package, but not everyone may understand how to use media queries in inline CSS. In this article, I'll show you how to use the inline media query in ReactJS.

So let's get started.

To use inline media queries in ReactJS, we must first install a library that supports the required functionality.

To get this tool, just use this command:

// For npm
npm i --save radium --force

// For yarn
yarn add radium

Once installed, Radium allows us to use inline styles that include support for media queries, pseudo-classes, and other sophisticated styling features.

Create a Home.jsx file and put this code inside it.

// Home.jsx
import React from 'react';
import Radium from 'radium';

const Home = () => {
    const styles = {
        container: {
            backgroundColor: 'lightblue',
            width: '100%',
            height: '100vh',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            '@media (max-width: 600px)': { // Media query for screens with a maximum width of 600px
                backgroundColor: 'lightcoral',
            },
        },
        text: {
            fontSize: '24px',
            fontWeight: 'bold',
            color: 'white',
        },
    };

    return (
        <div style={styles.container}>
            <p style={styles.text}>This content adapts based on screen size!</p>
        </div>
    );
}

export default Radium(Home);

In this code, the background color of the container changes to lightcoral when the screen width is 600px or less.

Now, in your App.js file, import StyleRoot and Radium from the Radium library. Also, be sure to import the Home component.

Include this code in your App.js file.

// App.js
import React from 'react';
import { StyleRoot } from 'radium';
import Radium from 'radium';
import Home from './components/Home';

function App() {

    return (
        <StyleRoot>
            <Home />
        </StyleRoot>
    );
}

export default Radium(App);

It's important to remember that whatever we return, such as the Home component in this example, must be wrapped in StyleRoot. Our main component, like the App, should also be wrapped in Radium.

Now, launch your project by running the command "npm start" in your terminal.

When the screen width is 600 pixels or less. The background color of the div changes to lightcoral.

Last Thought

Inline media queries can be useful for tiny projects when we do not require a major responsive style. However, for larger projects, it is recommended to keep code organized and follow best practices by creating media queries in separate files. However, when dealing with responsive changes for only a few items, using inline media queries is a more practical method.

If you have any questions related to this guide or any other web development, then you can ask them in the question box given below, and you will get an answer as soon as possible.