Встроенный медиа-запрос в компонентах React

Опубликовано: 7 Августа, 2021

Как правило, нельзя использовать встроенные стили с медиа-запросами, потому что React не позволяет нам использовать медиа-запросы во встроенных стилях. Мы можем использовать Radium, который является сторонним пакетом, который позволяет выполнять медиа-запросы для встроенного стиля.

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:
```
 npx создать-реагировать-приложение имя папки
```
Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:
```
 cd имя папки
```
Структура проекта: это будет выглядеть следующим образом.
Структура проекта
Шаг 3: Теперь создайте новый компонент Example.js в вашей папке src , который вернет текст GeeksforGeeks.
Шаг 4: Теперь перейдите к файлу app.js в своем редакторе и отредактируйте его, чтобы он возвращал пример компонента (пример).
Шаг 5: Теперь установите модуль Radium из корня вашего приложения my-app с помощью команды.
```
 $ npm install - сохранить радий
```
Шаг 6. Импортируйте радий с помощью {styleroot} из react в app.js и example.js.
Шаг 7: Наконец, мы можем использовать медиа-запросы в нашем компоненте реакции example.js. В этом примере мы добавили запрос, если ширина устройства меньше 501 пикселей, тогда наше приложение ничего не будет отображать.

Примечание. Следует иметь в виду, что синтаксис будет немного отличаться, например, мы должны обернуть все, что возвращаем, в 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
      <StyleRoot>
        <div className= "App" >
          <Example />
        </div>
      </StyleRoot>
    )
  }
 }
 
export default Radium(App); 

Filename-Example.js: Наш компонент

Javascript

 import React, { Component } from 'react'
 import Radium, { StyleRoot } from 'radium' ;
 class App extends Component {
  render() {
    const style = {
 
      // Adding media querry..
      '@media (max-width: 500px)' : {
        display: 'none' ,
      },
    };
    return (
 
      // Wrapping under styleroot.
      <StyleRoot>
        <div className= "App" >
          <h1 style={style}>GeeksforGeeks</h1>
        </div>
      </StyleRoot>
    )
  }
 }
 
export default Radium(App); 

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Вывод: на экране браузера вы увидите следующий вывод:

Теперь осмотрите окно и уменьшите ширину до 501px, GeeksforGeeks теперь не будет виден, вот как вы можете использовать медиа-запросы, встроенные в приложение React.

Technical Scripter

Встроенный медиа-запрос в компонентах React

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ