سلام وقت بخیر کد زیر نمونه کدی هست که برای استایل دهی themeprovider استفاده کردم اما تو برخی از کامپوننت‌ها تو عکس ضمیمه شده، استایل اعمال نمیشه!!

import React from 'react'
import './App.css'
import Panel from './components/panel/panel'
import { ThemeProvider, createTheme } from '@mui/material/styles'
import { BrowserRouter } from 'react-router-dom'
import { red } from '@mui/material/colors'
// Create a theme instance.
const theme = createTheme({
  typography: {
    fontFamily: ['Vazir, sans-serif'].join(',')
  },
  direction: 'rtl',
  palette: {
    primary: {
      main: '#556cd6'
    },
    secondary: {
      main: '#19857b'
    },
    error: {
      main: red.A400
    }
  }
})
function App () {
  return (
    
      
      
          
      
      
      
  )
}
export default App