Добавьте настраиваемую тему Material-UI в свое приложение React
По Create React App существует миллион руководств, но лишь немногие из них проходят через добавление минимального кода, необходимого для начала работы с темой Material-UI.
Мы пропустим основы React и сосредоточимся на:
- Установка Material-UI
- Добавление темы по умолчанию в ваше приложение
- Настройка темы по умолчанию
- Доступ к теме в ваших компонентах
Давайте начнем!
Установите React с приложением Create React
Откройте свой терминал и перейдите в папку, в которой вы хотите разместить приложение.
Выполните следующие команды, заменив material-ui-baseline
именем вашего проекта:
npx create-react-app material-ui-baseline cd material-ui-baseline npm start
Установить Material-UI
В вашем терминале внутри корневой папки проекта запустите:
// with npm npm install @material-ui/core
// with yarn yarn add @material-ui/core
Перейдите в public/index.html
и добавьте шрифт Roboto в свой <head>
:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
Если вы вообще планируете использовать Значки Material-UI, также добавьте ссылку Google Web Font:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
Из вашего терминала, находясь в корневой папке, установите пакет значков:
// with npm npm install @material-ui/icons
// with yarn yarn add @material-ui/icons
Удалите стоковые вещи
Откройте App.js
и удалите все, заменив его следующим кодом:
import React from 'react' const App = () => ( <div> <p>A bare bones application!</p> </div> ) export default App
Удалите App.css
, поскольку мы не используем его в App.js
.
Удалите файл index.css
и удалите его импорт из index.js
.
import './index.css';
Настройте ThemeProvider и CssBaseline в App.js
Во-первых, мы хотим определить объект темы с помощью createMuiTheme
, который позже мы передадим в наш ThemeProvider.
Добавьте новый файл в папку src
и назовите его theme.js
.
Здесь мы добавим наши пользовательские параметры, чтобы перезаписать параметры материала по умолчанию.
Импортируем createMuiTheme
, настраивая базовую тему:
import { createMuiTheme } from '@material-ui/core/styles' const theme = createMuiTheme({ palette: { primary: { 500: '#467fcf' }, }, }) export default theme
Ваш пользовательский интерфейс может быть расширен для охвата любых переменных, которые вы хотите, для некоторого вдохновения вот полный список значений по умолчанию.
Еще в App.js
мы собираемся импортировать нашу новую тему ThemeProvider
и CssBaseline
.
Затем, чтобы убедиться, что все наше приложение имеет доступ к переменным темы, мы заключим наш код в ThemeProvider
, используя наш собственный theme
в качестве опоры.
Мы также называем CssBaseline
внутри ThemeProvider
:
import React from 'react' import { ThemeProvider } from '@material-ui/core/styles' import CssBaseline from '@material-ui/core/CssBaseline' import theme from './theme' const App = () => ( <ThemeProvider theme={theme}> <CssBaseline /> <div> <p>A bare bones application!</p> </div> </ThemeProvider> ) export default App
Доступ к нашей теме
Теперь, когда у нас есть доступная тема, мы можем получить к ней доступ в любом из наших компонентов. Давайте добавим новый компонент, чтобы опробовать его!
Добавьте в src
новую папку с именем components
и давайте создадим новый файл с именем item.jsx
, добавив следующий код:
import React from 'react' const Item = () => { return ( <p>I'm an Item!</p> ) } export default Item
Импортируем компонент в наш App.js
и вставляем его в компонент:
import Item from './components/item' const App = () => ( <ThemeProvider theme={theme}> <CssBaseline /> <Item /> </ThemeProvider> )
Определите наш стиль
Давайте расширим компонент Item
, сделав базовую карту, но на этот раз с Material-UI, чтобы сделать тяжелую работу!
Во-первых, мы собираемся импортировать makeStyles
из библиотеки стилей материалов:
import { makeStyles } from '@material-ui/styles'
Используя его для определения ловушки useStyles
вне нашего компонента:
const useStyles = makeStyles(theme => ({ root: { margin: theme.spacing(3), width: 345, }, media: { height: 140, }, title: { color: theme.palette.primary.main } }))
В небольшом количестве кода происходит довольно много:
- Мы передаем наш
theme
, который мы определили ранее, в функциюmakeStyles
- Мы определяем объекты стиля (корень, медиа и заголовок), к которым мы можем получить доступ позже.
- Мы получаем доступ к переменным по умолчанию и пользовательским переменным, используя нашу тему (theme.spacing - значение по умолчанию).
Примечание: при определении стилей мы пишем объект стиля, аналогично добавлению встроенного стиля в React elementstyle={{ height: '100px' }}
Наконец, внутри нашего компонента мы можем вызвать наш style hook, позволяющий нам применять стили как className:
const classes = useStyles()
Создание с помощью Material-UI
Давайте соберем вместе некоторые компоненты Material-UI и применим стили.
Внутри нашего оператора возврата удалите предложение-заполнитель и добавьте Card:
<Card className={classes.root}> </Card>
Чтобы применить наш стиль, мы просто добавляем className
, получая доступ к той части объекта стиля, которую мы хотим назначить. В данном случае наш стиль classes.root
.
В нашей карточке мы собираемся добавить область действия (по умолчанию с красивой анимацией щелчка) с областью содержимого и изображением заголовка:
<CardActionArea> <CardMedia className={classes.media} image="https://images.unsplash.com/photo-1540573133985-87b6da6d54a9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80" title="Surprised monkey" /> <CardContent> /* text to follow */ </CardContent> </CardActionArea>
Внутри области содержимого мы добавим текст:
<Typography gutterBottom variant="h5" component="h2" className={classes.title}> OMG it's a Monkey! </Typography> <Typography variant="body2" color="textSecondary" component="p"> Monkey is a common name that may refer to groups or species of mammal. The term is applied descriptively to groups of primates </Typography>
Обратите внимание, что мы можем выбрать вариант компонента Typography
, обращаясь либо к нашему собственному определенному классу, используя className
, либо через атрибуты по умолчанию color
.
Под нашим CardActionArea
мы добавим кнопку, заключенную в компонент CardAction
:
<CardActions> <Button size="small" color="primary" href="https://unsplash.com/photos/Z05GiksmqYU"> See it on Unsplash </Button> </CardActions>
Теперь ваша карта должна выглядеть так:
Я включил код компонента элемента ниже:
Как видите, мы можем быстро создавать, используя блоки Material-UI в качестве основы, и очень легко применять наши пользовательские стили поверх них.
Полный код доступен на Github.
Ваше здоровье
Наборы