Material ui: The React component library you always wanted

javascript — Material-ui. Не применяются стили к

Всем привет. Начал изучать React. Также использую material-ui. Но столкнулся с такой проблемой: при кастомизации компонента Box не применяются указанные стили. Буду очень благодарен за любую наводку.

import s from "./Footer.module.css"
import {Box, Button, Container, Grid} from "@material-ui/core";
function Footer() {
    return (
        <footer>
            <Box bgcolor={"#1c1427"} color={"white"}>
                <Container maxWidth={"lg"}>
                    <Grid container spacing={5}>
                        <Grid item xs={12} sm={8}>
                            <Box className={s.logo}>
                                <a>Logo</a>
                            </Box>
                            <Box borderBottom={1}>
                                <a>Работа выполнена в рамках учебного проекта</a>
                            </Box>
                        </Grid>
                        <Grid item xs={12} sm={1}>
                            <Box>
                                <Button variant={"outlined"} color={"white"}>Войти</Button>
                            </Box>
                        </Grid>
                        <Grid item xs={12} sm={1}>
                            <Box>
                                <Button variant={"outlined"} color={"white"}>Зарегистрироваться</Button>
                            </Box>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
        </footer>
    )
}
export default Footer;

• javascript
• reactjs
• frontend
• create-react-app
• material-ui

Стилизовать компоненты в Material UI v. 5 можно с помощью атрибута sx. Код должен выглядить вот так:

<Box sx={{ backgroundColor: '#1c1427', color: 'white' }}>
   ...
</Box>

https://mui.com/material-ui/react-box/#the-sx-prop

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Material-UI альтернативы и похожие программы

Наше видение заключается в том, чтобы обеспечить элегантную реализацию React рекомендаций по дизайну материалов, которые можно настроить в соответствии с вашим брендом.

Рекомендации по дизайну материалов являются невероятной отправной точкой, но они не дают рекомендаций по всем аспектам или потребностям приложения. В дополнение к реализации, ориентированной на конкретные руководства, мы хотим, чтобы Material-UI стал тем, что обычно полезно для разработки приложений, и все это в духе рекомендаций Material Design.

Следовательно, Material-UI будет не только реализацией руководящих принципов проектирования материалов, но и библиотекой пользовательского интерфейса общего пользования, которая нужна многим. Это обобщенное использование не подразумевает никакой другой методологии проектирования. Это также означает, что у нас будут компоненты или комбинации, которые просто не рассматриваются в рекомендациях по проектированию.

Мы сосредоточимся на предоставлении всех низкоуровневых инструментов, необходимых для создания богатого пользовательского интерфейса с помощью React. После того, как мы реализуем спецификацию дизайна материалов (которая является довольно высокой планкой), вы сможете использовать ее для своего бизнеса с любой необходимой настройкой стиля.

Мы хотим, чтобы компании преуспели в использовании Material-UI таким образом, чтобы они соответствовали их бренду, приближались к философии материалов или нет. Мы не хотим, чтобы они чувствовали, что их интерфейс просто похож на другой продукт Google.

С точки зрения разработчика, мы хотим, чтобы Material-UI:
— Предоставить полностью инкапсулированные / компонуемые компоненты React.
— Быть темным / настраиваемым.
— Будь кросс-браузер совместимым и доступным.
— Развивайте радость разработчиков, чувство общности и среду, в которой новые и опытные разработчики могут учиться друг у друга.

Ссылки на официальные сайты

Официальный сайт

Функциональные возможности

реагировать Фреймворк CSS Материальный дизайн

Категории

Разработка

Теги

web-development css web-design

Официальный сайт

• Bootstrap

  Bootstrap — это набор инструментов с открытым исходным кодом для создания браузерных сайтов и приложений.

  Он содержит шаблоны дизайна на основе HTML и CSS для типографики, форм, кнопок, диаграмм, навигации и других компонентов интерфейса, а также до…

  Открытый исходный код Бесплатно HTML5 Boilerplate JavaScript Self-Hosted

  Html5 Адаптивный дизайн

  206

• Foundation

  Foundation — это простая в использовании, мощная и гибкая инфраструктура для создания быстрых прототипов и производственного кода на любом устройстве.

  Открытый исходный код Бесплатно Web

  Фреймворк CSS

  43

• Semantic UI

  Семантика дает дизайнерам и разработчикам возможность создавать общий словарь для пользовательского интерфейса.

  Бесплатно Web

  Адаптивный дизайн

  38

• UIkit

  Легкий и модульный каркас передней части для разработки быстрых и мощных веб-интерфейсов. UI Framework полный HTML / CSS, компонент JavaScript, форма, тема, выпадающий, отзывчивый … Более полный, чем Bootstrap или Foundation.

  Открытый исходный код Бесплатно Web

  Html5

  29

• Materialize

  Materialize — это современный адаптивный CSS-фреймворк на основе Material Design от Google

  Открытый исходный код Бесплатно Web

  Фреймворк CSS Материальный дизайн Адаптивный дизайн

  27

• Polymer

  Polymer — это библиотека, которая использует новейшие веб-технологии для создания пользовательских элементов HTML. Создайте что угодно, от кнопки до готового приложения, в виде инкапсулированного, многократно используемого элемента, который работает…

  Открытый исходный код Бесплатно Linux Mac Windows

  26

• Skeleton

  Skeleton — это небольшая коллекция файлов CSS и JS, которые могут помочь вам быстро разрабатывать сайты, которые выглядят красиво в любом размере, будь то 17-дюймовый экран ноутбука или iPhone. Skeleton построен на трех основных принципах: — Отзывчи…

  Открытый исходный код Бесплатно Web

  Фреймворк CSS Адаптивный дизайн

  20

• HTML5 Boilerplate

  Отличное значение по умолчанию для HTML5. HTML5 Boilerplate является базовым шаблоном HTML / CSS / JS для профессионалов для быстрого, надежного и перспективного сайта. После более чем трех лет итеративной разработки вы получите лучшие из лучших пра…

  Открытый исходный код Бесплатно Web

  Html5

  20

• Purecss

  Набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте.

  Открытый исходный код Бесплатно Web

  Html5

  13

• Metro UI CSS

  Metro UI CSS набор стилей для создания сайта с интерфейсом, аналогичным Windows 8 .

  Открытый исходный код Бесплатно LESS jQuery Web

  Адаптивный дизайн

  11

• Angular Material

  Проект Angular Material представляет собой реализацию Material Design в Angular. js. Этот проект предоставляет набор многократно используемых, хорошо протестированных и доступных компонентов пользовательского интерфейса на основе системы Material Des…

  Открытый исходный код Бесплатно Web

  Фреймворк CSS Материальный дизайн Адаптивный дизайн

  10

• Slides Framework

  Slides — это простая и мощная среда HTML и CSS, которая позволяет легко создавать красивые статические веб-сайты благодаря гибкой модульной настройке.

  Платно Self-Hosted

  Фреймворк CSS Адаптивный дизайн

  8

• Flat UI Pro

  Flat UI Pro выполнен на основе Twitter Bootstrap в потрясающем плоском стиле, а в комплект также входит PSD-версия для дизайнеров. Flat UI Pro содержит огромное количество базовых компонентов, иконок и глифов.

  Платно Web

  7

• Material Design for Bootstrap 4

  Более 400 элементов пользовательского интерфейса, более 600 значков материалов, 74 CSS-анимации, файлы SASS, шаблоны, учебные пособия и многое другое. Бесплатно для личного и коммерческого использования. Доверие 250 000+ разработчиков и дизайнеров. …

  Условно бесплатно Vue. js React Bootstrap jQuery AngularJS Web

  Фреймворк CSS Html5 Поддержка Bootstrap Материальный дизайн

  6

• HTML KickStart

  HTML KickStart — это ультракомпактный набор файлов HTML5, CSS и jQuery (javascript), макетов и элементов, предназначенных для того, чтобы дать вам преимущество и сэкономить много часов в вашем следующем веб-проекте.

  Бесплатно Web

  Html5

• GroundworkCSS

  GroundworkCSS — это 100% бесплатный и открытый исходный код HTML5, CSS и JavaScript Framework.

  Открытый исходный код Бесплатно Self-Hosted Web

  Фреймворк CSS Html5

  6

• MUI

  Особенности

  Бесплатно Web

  Фреймворк CSS Html5 Материальный дизайн Адаптивный дизайн

  6

• Spectre.

  css

  Spectre.css — это легкая, гибкая и современная CSS-инфраструктура для быстрой и расширяемой разработки.

  Открытый исходный код Бесплатно Self-Hosted Web

  Фреймворк CSS Адаптивный дизайн

  5

• Element UI

  Набор инструментов для веб-интерфейса Vue. js 2.0. https://github.com/ElemeFE/element

  Открытый исходный код Бесплатно Vue.js CSS JavaScript Self-Hosted Web

  Фреймворк CSS

  4

• Material Design Lite

  Реализация компонентов Material Design в ванильном CSS, JS и HTML. Material Design Lite (MDL) позволяет добавить внешний вид Material Design на ваши сайты со статическим контентом. Он не зависит от каких-либо фреймворков или библиотек JavaScript. Оп…

  Открытый исходный код Бесплатно GitHub Web

  Фреймворк CSS Адаптивный дизайн

  3

[email protected]

Установка — Material UI

Установка Material UI, самого популярного в мире фреймворка React UI.

Установка по умолчанию

Запустите одну из следующих команд, чтобы добавить пользовательский интерфейс материалов в свой проект:

npm

 npm install @mui/material @emotion/react @emotion/styled
 

пряжа

 пряжа добавить @mui/material @emotion/react @emotion/styled
 

Со стилевыми компонентами

Пользовательский интерфейс материалов использует Emotion в качестве механизма стилей по умолчанию. Если вы хотите вместо этого использовать стилизованные компоненты, выполните одну из следующих команд:

npm

 npm install @mui/material @mui/styled-engine-sc styled-components
 

пряжа

 пряжа добавить @mui/material @mui/styled-engine-sc styled-components
 

Посетите руководство по движку Styled для получения дополнительной информации о том, как настроить styled-components.

Одноранговые зависимости

react >= 17.0.0 и react-dom >= 17. 0.0 являются одноранговыми зависимостями.

Шрифт Roboto

Material UI предназначен для использования шрифта Roboto шрифт по умолчанию. Вы можете добавить его в свой проект с помощью npm или yarn через Fontsource или через CDN Google Fonts.

нпм

 нпм установить @fontsource/roboto
 

пряжа

 пряжа добавить @fontsource/roboto
 

Затем вы можете импортировать его в точку входа следующим образом:

 import '@fontsource/roboto/300.css';
импортировать '@fontsource/roboto/400.css';
импортировать '@fontsource/roboto/500.css';
импортировать '@fontsource/roboto/700.css';
 

Fontsource можно настроить для загрузки определенных поднаборов, насыщенности и стилей. Конфигурация типографики Material UI по умолчанию зависит только от веса шрифта 300, 400, 500 и 700.

Google Web Fonts

Чтобы установить шрифт Roboto в свой проект с помощью Google Web Fonts CDN, добавьте следующий фрагмент кода в тег вашего проекта:

  googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
 

Значки

Чтобы использовать компонент значка шрифта или предварительно созданные значки материалов SVG (например, те, которые можно найти в демонстрационных значках), необходимо сначала установить шрифт значков материалов. Вы можете сделать это с помощью npm или yarn или с помощью CDN Google Web Fonts.

нпм

 нпм установить @mui/icons-material
 

пряжа

 пряжа добавить @mui/icons-material
 

Google Web Fonts

Чтобы установить шрифт Material Icons в свой проект с помощью Google Web Fonts CDN, добавьте следующий фрагмент кода в тег вашего проекта:

Чтобы использовать компонент Font Icon , вы должны сначала добавить шрифт Material Icons. Вот несколько инструкций о том, как это сделать. Например, через веб-шрифты Google:

 <ссылка
  отн = "таблица стилей"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
 

CDN

Вы можете сразу начать использовать Material UI с минимальной внешней инфраструктурой, установив его через CDN, что является отличным вариантом для быстрого прототипирования. Следуйте этому примеру CDN, чтобы начать.

Мы , а не рекомендуем использовать этот подход в производстве. Для этого требуется, чтобы клиент загружал всю библиотеку, независимо от того, какие компоненты фактически используются, что негативно влияет на производительность и использование полосы пропускания.

Предоставляются два файла определения универсального модуля (UMD):

• один для разработки: https://unpkg.com/@mui/material@latest/umd/material-ui.development.js
• один для производства: https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js

Ссылки UMD используют тег last для указания на последнюю версию библиотеки. Этот указатель нестабильный и может быть изменен при выпуске новых версий. Вам следует указать конкретную версию, например v5.0.0.

Учебное пособие по пользовательскому интерфейсу материалов

| React.school

Material UI — наша любимая библиотека пользовательского интерфейса React, и, честно говоря, нет даже второй библиотеки пользовательского интерфейса для React, которую мы могли бы даже рекомендую. Сделать хорошую библиотеку пользовательского интерфейса крайне сложно по целому ряду причин. Это не только количество работа, необходимая для производства компонентов, которые можно использовать и которые хорошо выглядят, но эти компоненты должны быть хорошо задокументированы, иметь рабочие примеры и поддерживать бесконечное количество пограничных случаев, таких как отзывчивость, доступность, перевод, тематика и так далее.

Объем работы, проделанный над пользовательским интерфейсом материалов, делает его нашим выбором по умолчанию для профессиональных проектов. Если вы когда-нибудь пытались создать свою собственную библиотеку пользовательского интерфейса, вы знаете, как утомительно добиться правильного стиля и функциональности. Итак, выбрав Material UI, вы экономите много времени, которое можете потратить на создание функций для своего проекта или бизнеса.

Посмотрите это видео, в котором мы рассмотрели все, что описано в этой статье (и не только):

Установка Material UI

Сегодня мы покажем, что документация не имеет себе равных. На их домашней странице вы можете увидеть установка и использование. Вам нужен только этот пакет @material-ui/core который вы можете установить через npm или yarn. Вы также можете добавить пакет @material-ui/icons , если собираетесь использовать значки.

Затем вы захотите добавить таблицу стилей для шрифта Roboto в ваш основной файл index.html. Это действительно так, вы можете просмотреть официальные инструкции по установке здесь.

 
 
 $ npm install @material-ui/core @material-ui/icons 
 
 // Добавьте в файл index.html 
 
  
 
 // Вы также можете добавить шрифт Material icons 
 
  googleapis .com/icon?family=Material+Icons" /> 
 

Использование пользовательского интерфейса материалов — визуализация кнопки

Использовать компоненты просто. Просто импортируйте компонент из библиотеки и визуализируйте его, как любой другой компонент React.

 
 
 импорт React из 'реагировать'; 
 
 импортировать {кнопку} из '@material-ui/core'; 
 
 function App() { 
 
 return Hello World; 
 
 } 
 

Компоненты хороши тем, что все они содержат свои собственные стили, поэтому нет глобального файла CSS, который вы можете надо побеспокоиться. Вскоре мы обсудим тему, которая управляет такими свойствами, как интервал и основная цветовая палитра.

Как использовать документацию по пользовательскому интерфейсу материалов

На сайте пользовательского интерфейса материалов щелкните меню в верхнем левом углу, и вы увидите боковую панель. Сначала мы поговорим о двух разделах: Компоненты и API компонентов. Основное различие между этими двумя разделами заключается в том, что раздел Компоненты содержит примеры/демонстрации и объяснения для каждого компонента, в то время как Component API содержит полный список всех реквизитов и CSS правила/классы для каждого компонента (и никаких примеров). Каждый компонент появляется в обоих разделах, создавая хорошее разделение между исследование и проверка точных имен свойств.

Примеры компонентов Material UI

Раздел «Компоненты» — это место, где вы будете проводить большую часть своего времени при изучении того, как использовать Material UI. Наиболее важной частью каждого компонента является то, что на странице обычно есть рабочие примеры, которые вы можете попробовать.

Полный исходный код каждого примера можно просмотреть, просто щелкнув значок кода: < > для каждого примера. То, что вы обычно видите на каждом компоненте, является фрагментом того, как использовать компонент, но более чем вероятно, что вы собираетесь хотите увидеть, как использовался этот компонент, примененный CSS и полный список импорта.