آموزش ساخت تم در MUI برای اپلیکیشنهای ری اکت


ساخت تم در MUI برای React به شما این امکان را می‌دهد که ظاهر برنامه خود را به طور کامل personalize کنید. این کار شامل رنگ‌ها، فونت‌ها، سایه‌ها و سایر عناصر بصری می‌شود.

در اینجا مراحلی که باید برای ایجاد تم در MUI برای ری‌اکت دنبال کنید، آورده شده است:

1. نصب MUI Theme:

ابتدا باید MUI Theme را نصب کنید. می‌توانید این کار را با استفاده از دستور زیر انجام دهید:

npm install @mui/material @emotion/react @emotion/styled

2. ایجاد فایل تم:

یک فایل جدید به نام theme.jsx یا theme.tsxایجاد کنید. این فایل جایی است که در آن تم خود را تعریف خواهید کرد.

3. تعریف تم:

در فایل theme.jsx یا theme.tsx، تم خود را با استفاده از createTheme از MUI تعریف کنید.

import { createTheme } from '@mui/material';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976D2', // رنگ اصلی
    },
    secondary: {
      main: '#F44336', // رنگ ثانویه
    },
  },
  typography: {
    fontFamily: 'Roboto', // فونت
  },
});

export default theme;

در این مثال، ما یک تم ساده با دو رنگ اصلی و ثانویه و یک فونت تعریف کرده‌ایم.

شما می‌توانید هر property را که MUI Theme ارائه می‌دهد، personalize کنید. برای اطلاعات بیشتر به مستندات MUI Theme [https://mui.com/material-ui/customization/theming/] مراجعه کنید.

4. استفاده از تم:

برای استفاده از تم خود، باید آن را در App component خود پراوید کنید.

import React from 'react';
import theme from './theme';
import { ThemeProvider } from '@mui/material';

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      {/*  کامپوننت‌های فرزند شما در اینجا قرار می‌گیرند */}
    </ThemeProvider>
  );
};

export default App;

حالا تم شما در تمام کامپوننت‌های فرزند App component شما اعمال می‌شود.

نکات:

  • می‌توانید از ابزارهای online مانند MUI Theme Playground [نشانی وب نامعتبر برداشته شد] برای ایجاد و personalize تم خود به صورت بصری استفاده کنید.
  • MUI Theme از CSS Modules [نشانی وب نامعتبر برداشته شد] برای اسکوپ‌دهی استایل‌ها استفاده می‌کند. این به شما کمک می‌کند تا از تداخل استایل‌ها در برنامه خود جلوگیری کنید.
  • می‌توانید از ThemeProvider [نشانی وب نامعتبر برداشته شد] برای اعمال تم‌های مختلف در قسمت‌های مختلف برنامه خود استفاده کنید.


در اینجا معادل کدهای قبلی با استفاده از TypeScript آورده شده است:

import { createTheme } from '@mui/material';

interface Theme {
  palette: {
    primary: {
      main: string;
    };
    secondary: {
      main: string;
    };
  };
  typography: {
    fontFamily: string;
  };
}

const theme: Theme = createTheme({
  palette: {
    primary: {
      main: '#1976D2', // رنگ اصلی
    },
    secondary: {
      main: '#F44336', // رنگ ثانویه
    },
  },
  typography: {
    fontFamily: 'Roboto', // فونت
  },
});

export default theme;

تغییرات:

  • ما از یک interface به نام Theme برای تعیین ساختار تم خود استفاده می‌کنیم. این به ما اجازه می‌دهد تا propهای تم خود را به طور دقیق تایپ کنیم.
  • نوع main در interface palette به string تغییر یافته است.
  • ما از theme: Theme در ThemeProvider استفاده می‌کنیم تا نوع تم را به طور واضح مشخص کنیم.

با استفاده از TypeScript، می‌توانید از بررسی نوع برای اطمینان از اینکه از تم خود به درستی استفاده می‌کنید، بهره‌مند شوید. این می‌تواند به جلوگیری از اشکالات در برنامه شما کمک کند.

نکات:

  • می‌توانید از interface های جداگانه برای تعریف بخش‌های مختلف تم خود، مانند palette و typography استفاده کنید.
  • می‌توانید از type aliases برای ایجاد نام‌های کوتاه‌تر و خواناتر برای نوع‌های پیچیده استفاده کنید.
  • می‌توانید از generics برای ایجاد تم‌های generic که می‌توان از آنها در برنامه‌های مختلف استفاده کرد، استفاده کنید.