React 组件中的内联媒体查询

通常，不能使用媒体查询进行内联样式，因为 React 不允许我们在内联样式中使用媒体查询。我们可以使用radium ，它是一个第三方包，可以为内联样式启用媒体查询。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

项目结构

第 3 步：现在在您的src文件夹中创建一个新组件Example.js ，它将返回GeeksforGeeks文本。

第 4 步：现在在编辑器中转到 app.js 文件并对其进行编辑，使其返回一个组件示例（一个示例）。

第 5 步：现在使用命令从 my-app 的根目录安装Radium模块。

$ npm install --save radium

第 6 步：从 app.js 和 example.js 中的 react 导入带有 { styleroot } 的镭。

第 7 步：最后我们可以在我们的 react 组件 example.js 中使用媒体查询。在这个例子中，我们添加了一个查询，如果设备的宽度小于 501px，那么我们的应用程序将不显示任何内容。

注意：我们必须记住的一件事是语法会略有不同，就像我们必须包装我们在 styleroot 中返回的所有内容。

文件名-App.js：

Javascript

import React, { Component } from 'react'
import Radium, { StyleRoot } from 'radium';
 
// Importing our Example component(src folder)
import Example from './Example'
 
class App extends Component {
  render() {
    return (
 
      // Wrapping in styleroot
      
        

          
        
      
    )
  }
}
 
export default Radium(App);

文件名-Example.js：我们的组件

Javascript

import React, { Component } from 'react'
import Radium, { StyleRoot } from 'radium';
class App extends Component {
  render() {
    const style = {
 
      // Adding media query..
      '@media (max-width: 500px)': {
        display: 'none',
      },
    };
    return (
 
      // Wrapping under styleroot.
      
        

          
GeeksforGeeks
        
      
    )
  }
}
 
export default Radium(App);

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：您将在浏览器屏幕上看到以下输出：

现在检查窗口并将宽度减小到 501px， GeeksforGeeks现在将不可见，这就是您可以在 React 应用程序中使用内联媒体查询的方式。