Getting started Installation

• Название: Getting started Installation
• Дата: 28.09.2022
• Размер: 45.43 Kb.
• Имя файла: _Design System (Material UI).docx
• Тип: Документы; #702989
• страница: 1 из 3

Getting started
Installation
npm install @mui/material @emotion/react @emotion/styled
Стили

По дефолту Material UI использует Emotion в качестве написания механизмов стилей, но можно использовать Styled-components. Для это нужно устанавливать такой командой:

npm install @mui/material @mui/styled-engine-sc styled-components
Шрифт

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

<link

rel="stylesheet"

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

/>
import '@fontsource/roboto/300.css';
Иконки

npm install @mui/icons-material
Customization
Theming

Для настройки темы нужно использовать ThemeProvider компонент. Данный компонент должен быть родительским для всего приложения.
import { red } from '@mui/material/colors';

import { ThemeProvider, createTheme } from '@mui/material/styles';
const darkTheme = createTheme({

palette: {

mode: ‘dark’,

primary: {

main: ‘#ff4400’,

},

},

});

function App() {

return <ThemeProvider theme={darkTheme}>...ThemeProvider>;

}
Для создания самой темы используется функция createTheme. Первым параметром принимает может принимать другой объект createTheme, а вторым – новый объект темы. Это нужно для расширения первого объекта новыми стилями.
Palette

Palette – объект отвечающий за цвета.

Основные цвета:

• 
  Primary – для основных компонентов приложения, которые используются чаще всего (по дефолту светло голубой #90caf9 (main));
  
• 
  Secondary – используется для дополнительных элементов интерфейса, для выделения или подчеркивания (по дефолту розово-фиолетовый #ce98d8 (main));
  
• 
  Error – используется для выделения элемента, который точно должен увидеть пользователь (по дефолту красный #f44336 (main));
  
• 
  Warning – используется для обозначения потенциально опасных действий и выделения важной информации (по дефолту оранжевый #ffa726 (main));
  
• 
  Info – используется для выделения нейтральной или не обязательной информации (по дефолту голубой #29b6f6 (main));
  
• 
  Success – используется для обозначения успешно завершенного действия, инициированного пользователем (по дефолту зеленый #66bb6a (main)).
  

Разделение на оттенок:

• 
  Light – светлый, тусклый оттенок;
  
• 
  Main – стандартный оттенок;
  
• 
  Dark – темный, насыщенный оттенок.
  

Настройка палитры цветов:

interface PaletteColor {

light?: string;

main: string;

dark?: string;

contrastText?: string;

}
Typography

Typography – объект отвечающий за шрифты.

const theme = createTheme({

typography: {

fontFamily: [ // определение другого шрифта

'-apple-system',

'BlinkMacSystemFont',

'"Segoe UI"',

'Roboto',

'"Helvetica Neue"',

].join(','),

fontSize: 12, // определение размера шрифта

htmlFontSize: 12, // определение размера шрифта в html-элементе

'@media (min-width:600px)': { // адаптивное изменение размера

fontSize: 14,

},

[theme.breakpoints.up('md')]: { // адаптивное изменение размера

fontSize: '2.4rem',

},

});

Spacing

theme.spacing() – хелпер для создания постоянного интервала между элементами интерфейса.

MUI по умолчанию использует рекомендуемый коэффициент масштабирования 8 пикселей.

const theme = createTheme({

spacing: 8, // по дефолту (1)

spacing: 4, // изменение дефолтного значения (2)

spacing: (factor) => `${0.25 * factor}rem`, // изменение значения с помощью функции (3)

spacing: [0, 4, 8, 16, 32, 64], // изменение значения с помощью массива (4)

});

theme.spacing(2); // `${8 * 2}px` = ‘16px’ (1)

theme.spacing(2); // `${4 * 2}px` = ‘8px’ (2)

theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px (3)

theme.spacing(2); // ‘8px’ (4)
Breakpoints

Точки остановки:

• 
  xs – 0px;
  
• 
  sm – 600px;
  
• 
  md – 900px;
  
• 
  lg – 1200px;
  
• 
  xl – 1536px.
  

Медиа-запросы:

• 
  theme.breakpoints.up(key) – [md, ∞) = [900px, ∞);
  
• 
  theme.breakpoints.down(key) – [0, md) = [0, 900px);
  
• 
  theme.breakpoints.only(key) – [md, lg) = [900px, 1200px);
  
• 
  theme.breakpoints.not(key) – [xs, md) and [lg, ∞) = [0, 900px) and [1200px, ∞);
  
• 
  theme.breakpoints.between(key1, key2) – [sm, md) = [600px, 900px).
  

(key – xs, sm, md, lg, xl).
const styles = (theme) => ({

root: {

backgroundColor: 'blue',

[theme.breakpoints.up('md')]: {

backgroundColor: 'red',

},

[theme.breakpoints.down('md')]: {

backgroundColor: 'red',

},

[theme.breakpoints.only('md')]: {

backgroundColor: 'red',

},

[theme.breakpoints.not('md')]: {

backgroundColor: 'red',

},

[theme.breakpoints.between('sm', 'md')]: {

backgroundColor: 'red',

},

},

});
Density

Плотность – определяет то как будут располагаться компоненты относительно друг друга.

Z-Index

z-index – это свойство CSS, которое помогает управлять макетом, предоставляя третью ось для упорядочивания содержимого.

Значения z-index для различных накладывающихся компонентов:

• 
  mobile stepper: 1000;
  
• 
  fab: 1050;
  
• 
  speed dial: 1050;
  
• 
  app bar: 1100;
  
• 
  drawer: 1200;
  
• 
  modal: 1300;
  
• 
  snackbar: 1400;
  
• 
  tooltip: 1500.
  

Transitions

Transitions – ключ позволяющий настраивать продолжительность и смягчение различных переходов, используемых в компонентах MUI, и предоставляет утилиту для создания пользовательских переходов.

theme.transitions.create(props, options) => transition;

• 
  prop – (строка | строка []) предоставляет свойство CSS или список свойств CSS, которые необходимо преобразовать. По умолчанию [‘all’].
  
• 
  options – (объект [необязательный]).
  
• 
  options.duration – (строка | число [необязательный]) настраивает продолжительность перехода.
  
• 
  options.easing – (строка [необязательный]) настраивает мягкость перехода.
  
• 
  options.delay – (строка [необязательный]) настраивает задержку перехода.
  
• 
  transition – значение перехода CSS, которое включает в себя все свойства CSS, подлежащие переходу, вместе с определенной продолжительностью, замедлением и задержкой.
  

transition: ${theme.transitions.create(['background-color', 'transform'], {

duration: theme.transitions.duration.standard,

})};
theme.transitions.getAutoHeightDuration(height) => duration;

• 
  height – (число) высота компонента.
  
• 
  duration – расчетная продолжительность на основе высоты.
  

Components

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

const theme = createTheme({

components: {

// Название компонента

MuiButton: {

// Изменение пропсов по умолчанию

defaultProps: {

disableRipple: true,

},

// Изменение свойств классов

styleOverrides: {

// Изменение цвета текста для класса root и body;

root: ({ ownerState }) => ({

color: ‘#fff’;

}),

body: {

color: ‘#fff’;

}

}

},

},

});
Можно передавать коллбек в качестве значения в каждый ключ styleOverrides для того, чтобы применить стили на основе реквизита (ownerState).

ownerState – это комбинация общедоступных свойств, которые вы передаете в компоненту, а также это внутреннее состояние компонента.
How to customize

Способы кастомной настройки стилей компонентов:

• 
  One-off customization (Разовая настройка);
  
• 
  Reusable component (Многоразовая настройка);
  
• 
  Global theme variation (Глобальная вариация темы);
  
• 
  Global CSS override (Глобальное переопределение CSS).
  

One-off customization (Разовая настройка).

Для изменения стиля одного экземпляра компонента, можно использовать sx, имена классов MU, обычный className и состояния элементов в MU.

<Slider

className={slider-custom}

defaultValue={30}

sx={{

width: 300,

color: 'success.main',

'& .MuiSlider-thumb': {

borderRadius: '1px',

},

}}

/>

Состояния элементов в MUI:

• 
  active – .Mui-active;
  
• 
  checked – .Mui-checked;
  
• 
  completed – .Mui-completed;
  
• 
  disabled – .Mui-disabled;
  
• 
  error – .Mui-error;
  
• 
  expanded – .Mui-expanded;
  
• 
  focus visible – .Mui-focusVisible;
  
• 
  focused – .Mui-focused;
  
• 
  required – .Mui-required;
  
• 
  selected – .Mui-selected;
  

Reusable component (Многоразовая настройка).

Для повторного использования одних и тех же переопределений в разных местах, можно создать компонент с помощью утилиты styled().
import Slider from '@mui/material/Slider';

import { styled } from '@mui/material/styles';

const SuccessSlider = styled(Slider)(({ theme }) => ({

width: 300,

color: theme.palette.success.main,

}));

export default function StyledCustomization() {

return <SuccessSlider defaultValue={30} />;

}
Global theme variation (Глобальная вариация темы).

Для того, чтобы создать глобальный вариант темы можно использовать ключ components, который позволяет своими внутренними ключами настраивать значения, которые стоят по умолчанию у каждого компонента.
Global CSS override (Глобальное переопределение CSS).

Для того, чтобы добавить глобальные базовые стили для элементов HTML, можно использовать GlobalStyles компонент.

Fragment>

<GlobalStyles styles={{ h1: { color: 'gray' } }} />

<h1>Gray h1 element</h1>

Fragment>
Props
Autocomplete

<Autocomplete

disablePortal // элемент будет находится в иерархии Dom родительского компонента

disabled// недоступен

readOnly// только для чтения (нельзя выбирать и писать)

clearOnEscape// очистка поля по escape

claerOnBlur// очистка введенного (не выбранного) значения при расфокусе

autoHighlight// автоматический выбор первого элемента подстановки

multiple// множественный выбор

defaultValue={[MovieArrayObjects[1]]} // задание дефолного значения

id="movie-id" // уникальный id

options={MovieArrayObjects.map((option) => option.title)} // задание списка с вариантами для заполнения

getOptionLabel={(option) => option.title} // указание свойства объекта для отображения

renderInput={(params) => // рендер текстового поля для ввода



{...params}

label="Movie"

inputProps={{

…params.inputProps,

type: “search”,

}}

/>}

renderOption={(props, option) => // рендер одного блока с вариантом заполнения





{options.title}



}

PaperComponent={() => …} // рендер тела всплывающего окна

PopperComponent={() => …} // позиционирование всплывающего окна

/>

<ClearIcon fontSize=”small” /> // задние значка очистки поля
Button

<Button // обычная кнопка

children={ / ‘Text’} // содержание компонента

variant="text / contained / outlined" // внешний вид кнопки (по дефолту Text)

disabled// недоступен

href="#link" // ссылка на которую переходить при нажатии

color="success / error / secondary / primary / info / warning / inherit" // задание цвета кнопки

size="small / medium / large" // задание размера кнопки

startIcon={} // добавление иконка в начале кнопки

endIcon={} // добавление иконка в конце кнопки

>

Text

Button>
<IconButton // кнопка-иконка

children={} // содержание компонента

disabled// недоступен

disableFocusRipple// пульсация фокуса клавиатуры

disableRipple// эффект пульсации отключен

edge=”start / end / false”// свойство для выравнивания

>

<DeleteIcon />

IconButton>
<LoadingButton // кнопка в состоянии загрузки

children={} // содержание компонента

disable// недоступен

loading// отображение индикатора загрузки

loadingIndicator=”Loading…” // отображаемый элемент во время загрузки

loadingPosition=”start / end” // выбор позиции индикатора загрузки

endIcon={} // добавление иконка в конце кнопки

>

Submit

LoadingButton>
<ButtonBase> // простой строительный блок для создания кнопки

Text

ButtonBase>
Button group

<ButtonGroup // обычная кнопка

children={} // содержание компонента

variant="text / contained / outlined" // по дефолту Text

aria-lable="..." // метка или название группы

disabled// недоступен

color="success / error / secondary / …" // задание цвета группы

size="small / medium / large" // задание размера группы

orientation=”horizontal / vertical” // управление расположения кнопок по осям (по дефолту horizontal)

disableElevation// использование минимальной высоты (отключение высоты)

fullWidth // растягивание элемента на всю ширину контейнера

>

<Button>1Button>

<Button>2Button>

<Button>3Button>

Button>

  1   2   3