Material-UI – это популярная библиотека пользовательского интерфейса для приложений React, которая соответствует рекомендациям Google по дизайну материалов. Одной из ключевых особенностей Material-UI является возможность легко применять предопределенные стили с помощью функции «общие стили». В этой статье мы рассмотрим различные методы, доступные в Material-UI для использования общих стилей, попутно предоставляя примеры кода.

Методы использования общих стилей Material-UI:

1. makeStyles:
   Хук makeStyles — это мощный способ определения пользовательских стилей с помощью объектов JavaScript. Он позволяет создавать повторно используемые объекты стиля, которые можно применять к нескольким компонентам. Вот пример:

import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
  root: {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
  },
});
function MyComponent() {
  const classes = useStyles();
  return <div className={classes.root}>Hello, Material-UI!</div>;
}

2. withStyles:
   Компонент высшего порядка withStyles (HOC) — это еще один метод применения стилей к компонентам. Это позволяет вам обернуть ваш компонент функцией withStyles, которая внедряет определенные стили в качестве реквизита. Вот пример:

import { withStyles } from '@material-ui/core/styles';
const styles = {
  root: {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
  },
};
function MyComponent({ classes }) {
  return <div className={classes.root}>Hello, Material-UI!</div>;
}
export default withStyles(styles)(MyComponent);

3. createStyles:
   Функция createStyles используется в сочетании с HOC withStyles и позволяет определять стили в отдельном файле. Этот метод обеспечивает лучшую организацию и разделение задач. Вот пример:

styles.js

import { createStyles } from '@material-ui/core/styles';
export default createStyles({
  root: {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
  },
});

MyComponent.js

import { withStyles } from '@material-ui/core/styles';
import styles from './styles';
function MyComponent({ classes }) {
  return <div className={classes.root}>Hello, Material-UI!</div>;
}
export default withStyles(styles)(MyComponent);

4. Свойство ClassName:
   Компоненты Material-UI часто предоставляют свойство className, которое позволяет напрямую применять пользовательские стили. Этот метод полезен, когда вам нужно переопределить определенные стили для конкретного экземпляра компонента. Вот пример:

import { Button } from '@material-ui/core';
function MyComponent() {
  return <Button className="custom-style">Click Me</Button>;
}
// CSS
.custom-style {
  background-color: blue;
  color: white;
  padding: 10px;
}

В этой статье мы рассмотрели несколько методов использования общих стилей Material-UI. Хук makeStyles, withStyles HOC, функция createStyles и свойство className предоставляют различные подходы к применению стилей к компонентам Material-UI. Используя эти методы, вы можете создавать визуально привлекательные и единообразные пользовательские интерфейсы в своих приложениях React.