Как использовать компонент Box в пользовательском интерфейсе материалов?

Опубликовано: 15 Февраля, 2023

Компонент Box служит компонентом-оболочкой для большинства потребностей утилиты CSS. Материал UI для React имеет этот компонент, доступный для нас, и его очень легко интегрировать. Мы можем использовать компонент Box в ReactJS, используя следующий подход.

Создание приложения React и установка модуля:

Шаг 1: Создайте приложение React с помощью следующей команды:

npx create-react-app foldername

Шаг 2: После создания папки проекта, т. е. имя папки , перейдите к ней с помощью следующей команды:

cd foldername

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

npm install @mui/material

Структура проекта: Это будет выглядеть следующим образом.

Пример 1. В этом примере мы создадим простое приложение, использующее компонент Box для отображения статического текста. Обновите файл App.js, как показано ниже.

Имя файла: App.js:

Javascript

import { Box } from "@mui/material";
import React from "react"
  
const App = () => {
  
    return (
        <div style={{ 
            marginLeft: "40%", 
            marginTop: "60px", 
            width: "30%" 
        }}>
            <Box color="white" 
                bgcolor="palevioletred" p={1}>
                Greetings from GeeksforGeeks!
            </Box>
        </div>
    );
}
  
export default App

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

npm start

Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:

Пример 2. В этом примере мы создадим простое приложение, которое отображает нажимаемую кнопку внутри компонента Box. Обновите файл App.js, как показано ниже.

Имя файла: App.js

Javascript

import React from "react"
import { Box, Button } from "@mui/material";
  
const App = () => {
    return (
        <Box component="span" 
            sx={{ p: 2, border: "1px dashed grey" }}>
            <Button style={{ color: "green" }}>
                Geeksforgeeks
            </Button>
        </Box>
    );
}
  
export default App

Шаги для запуска приложения:

npm start

Выход:

Ссылка: https://mui.com/material-ui/react-box/#main-content

JavaScript

Как использовать компонент Box в пользовательском интерфейсе материалов?

Javascript

Javascript

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