Метод 1: встроенное оформление CSS
Один простой метод применения встроенного оформления в компонентах Material-UI — использование реквизита style. Свойство styleпозволяет нам передавать объект, содержащий свойства CSS и соответствующие им значения, непосредственно компоненту. Вот пример:

import React from 'react';
import { Button } from '@material-ui/core';
const MyButton = () => {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    borderRadius: '5px',
  };
  return (
    <Button variant="contained" style={buttonStyle}>
      Click Me
    </Button>
  );
};
export default MyButton;

Метод 2: CSS-in-JS со стилями Material-UI
Material-UI предоставляет мощное решение для стилизации под названием «CSS-in-JS», используя встроенный makeStylesили styledфункций. Эти функции позволяют определять стили для конкретного компонента с помощью JavaScript. Вот пример использования makeStyles:

import React from 'react';
import { Button } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
  buttonStyle: {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    borderRadius: '5px',
  },
});
const MyButton = () => {
  const classes = useStyles();
  return (
    <Button variant="contained" className={classes.buttonStyle}>
      Click Me
    </Button>
  );
};
export default MyButton;

Метод 3: переопределение стилей Material-UI
Компоненты Material-UI поставляются со стилями по умолчанию, но вы можете переопределить их для определенных экземпляров. Этого можно добиться, передав имя собственного класса или используя свойство classes. Вот пример:

import React from 'react';
import { Button } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
  customButton: {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    borderRadius: '5px',
  },
});
const MyButton = () => {
  const classes = useStyles();
  return (
    <Button variant="contained" classes={{ root: classes.customButton }}>
      Click Me
    </Button>
  );
};
export default MyButton;

В этой статье мы рассмотрели несколько методов использования встроенного стиля с компонентами Material-UI для настройки пользовательского интерфейса. Мы рассмотрели использование встроенных стилей CSS, CSS-in-JS с makeStylesи переопределение стилей Material-UI. Каждый подход обеспечивает гибкость и дает разработчикам возможность создавать визуально привлекательные и уникальные пользовательские интерфейсы. Используя возможности встроенного стиля в Material-UI, вы можете настроить пользовательский интерфейс вашего приложения в соответствии с вашими требованиями к дизайну.

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