Добавьте настраиваемую тему 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.

Ваше здоровье

Наборы