Пользовательская тема палитры MUI не применяется. ⇐ CSS

[Anonymous]

Стек: TypeScript, React, Material UI v5, Vite
Краткая версия: моя пользовательская тема не применяется к элементам на моем сайте, и я не могу понять, почему. Я потратил часы, пытаясь это исправить.
Я создал эту пользовательскую палитру, просмотрел документацию и соответствующие сообщения StackOverflow (см. конец сообщения) и просто не могу понять, что не так.
Текущая теория заключается в том, что это либо способ вложения импортированных тем, либо способ разделения темы между файлами, но я не понимаю, почему это было бы так. (Я добавляю темы таким многофайловым способом, потому что этот проект, по сути, представляет собой несколько веб-сайтов, объединенных в одну службу хостинга).
Я настроил этот проект с помощью Vite, который обошёл кошмар управления пакетами и версиями, но, возможно, это как-то вызывает проблему?
В этом коде нет ошибок или предупреждений при компиляции или запуске.
Для чтобы действительно видеть, что палитра не применяется, я изменил цвета, сделав их яркими и сильно отличающимися.

Краткое описание файлов:

• App.tsx: главная страница
• global_theme.tsx: разрешен светлый и темный режим, разрешены переменные CSS, установка значений точек останова
• theme.tsx: содержит фактические переменные палитры, которые я пытаюсь использовать
  
  Я вижу базовые цвета MUI — изображение здесь.

Выдержки из console.log(homeTheme())

• Точки останова соответствуют ожиданиям
• Цветовые темы не применяются к объекту homeTheme

(Я не смог найти в Интернете, на что ссылаются элементы Channel поэтому я оставил их.)

Код: Выделить всё

Object { breakpoints: {…}, direction: "ltr", components: {}, palette: {…}, spacing: spacing2(argsInput), shape: {…}, defaultColorScheme: "light", colorSpace: undefined, containerQueries: containerQueries(name), applyStyles: applyStyles(key, styles), … }

Код: Выделить всё

{
"breakpoints": {
"keys": [
"mobile",
"tablet",
"laptop",
"desktop"
],
"values": {
"mobile": 0,
"tablet": 640,
"laptop": 1024,
"desktop": 1200
},
"unit": "px"
},
"palette": {
"mode": "light",
"common": {
"black": "#000",
"white": "#fff",
"background": "#fff",
"onBackground": "#000",
"backgroundChannel": "255 255 255",
"onBackgroundChannel": "0 0 0"
},
"primary": {
"main": "#1976d2",
"light": "#42a5f5",
"dark": "#1565c0",
"contrastText": "#fff",
"mainChannel": "25 118 210",
"lightChannel": "66 165 245",
"darkChannel": "21 101 192",
"contrastTextChannel": "255 255 255"
},
"contrastThreshold": 3,
"tonalOffset": 0.2,
"text": {
"primary": "rgba(0, 0, 0, 0.87)",
"secondary": "rgba(0, 0, 0, 0.6)",
"primaryChannel": "0 0 0",
"secondaryChannel": "0 0 0"
},
"background": {
"default": "#fff",
"defaultChannel": "255 255 255",
},
},
"defaultColorScheme": "light",
"cssVarPrefix": "mui",
"colorSchemeSelector": "media",
"rootSelector": ":root",
"colorSchemes": {
"light": {
"palette": {
"mode": "light",
"common": {
"black": "#000",
"white": "#fff",
"background": "#fff",
"onBackground": "#000",
"backgroundChannel": "255 255 255",
"onBackgroundChannel": "0 0 0"
},
"primary": {
"main": "#1976d2",
"light": "#42a5f5",
"dark": "#1565c0",
"contrastText": "#fff",
"mainChannel": "25 118 210",
"lightChannel": "66 165 245",
"darkChannel": "21 101 192",
"contrastTextChannel": "255 255 255"
},
"contrastThreshold": 3,
"tonalOffset":  0.2,
"text": {
"primary": "rgba(0, 0, 0, 0.87)",
"secondary": "rgba(0, 0, 0, 0.6)",
"primaryChannel": "0 0 0",
"secondaryChannel": "0 0 0"
},
"background": {
"default": "#fff",
"defaultChannel": "255 255 255",
},
}
},
},
}

App.tsx

Код: Выделить всё

import Typography from '@mui/material/Typography';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import { Box, CssBaseline, Link } from '@mui/material';

import { ThemeProvider } from '@mui/material/styles';
import { ThemeProvider as Emotion10ThemeProvider } from '@emotion/react';
import { StyledEngineProvider } from "@mui/material";

import './App.css'
import homepageTheme from './theme';

function App() {
const homeTheme = homepageTheme;
console.log(homeTheme);

return (






 {/* Light purple */}
 {/* Red */}

 {/* Light purple */}
Zach M









)
}

export default App

global_theme.tsx

Код: Выделить всё

import { createTheme, type ThemeOptions } from "@mui/material/styles";

declare module '@mui/material/styles' {
interface BreakpointOverrides {
mobile: true; // adds custom breakpoints
tablet: true;
laptop: true;
desktop: true;
xs: false; // removes the default breakpoints
sm: false;
md: false;
lg: false;
xl: false;
}
}

const globalTheme = createTheme({
breakpoints: {
values: {
mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1200,
},
},
colorSchemes: {
light: true,
dark: true,
},
cssVariables: true,
});

export default globalTheme;

theme.tsx

Код: Выделить всё

import { createTheme } from '@mui/material/styles';
import { grey, blue, indigo, cyan, red, purple } from '@mui/material/colors';
import globalTheme from './global_theme';

declare module '@mui/material/styles' {
interface Palette {
custom: Palette['primary'];
}
interface PaletteOptions {
custom?: PaletteOptions['primary'];
}
}

const homepageTheme = createTheme({
...globalTheme,
colorSchemes: {
light: {
palette: {
background: {
default: purple[100],
},
primary: {
main: '#4d858aff',
dark: '#203840ff',
light: red[500],
contrastText: purple[100],
},
secondary: {
main: '#c3e8ed',
light: cyan[50],
dark: '#afd6db',
contrastText: grey[800],
}
},
},
dark: {
/* dark palette here, not being used on site at the moment */
},
},
});

export default homepageTheme;

Возможно, неполный список того, что я пробовал/проверял. Не стесняйтесь подтвердить это, поскольку я, возможно, пропустил что-то незначительное:

• Проверено наличие обновлений пакета (npm)
• Проверено импорт
• Проверено, что theme.tsx правильно использует createTheme()
• Проверено, что я получаю доступ к переменным палитры правильно
• Установите
• Установите и , хотя мне неясно, что делает второй
• Пробовал и bgcolor, и backgroundColor
• Попробовал оба sx={{}} и style=

Соответствующие сообщения и документы, которые я пробовал (опять же, возможно, есть и другие, которые я забыл):

• Передача пользовательских цветов палитры в цветовую опору в MUI Typography.
• https://mui.com/material-ui/customization/dark-mode/
• Палитра контрастности темы MUI ReactText не работает
• Как правильно установить фон контейнера или других компонентов MUI?
• Невозможно применить пользовательскую тему в MUI React
• Тема пользовательского интерфейса Material не применяется
• Пользовательские цвета темы не применяются в MUI
• Тема Mui не применяется, если находится внутри компонента-оболочки
• Пользовательская тема MUI не применяется
• Как расширить цветовую палитру Mui с помощью Typescript
• Material-ui Следующая тема Нет применение
• Этот вариант очень близок, но устарел. Реализация пользовательской темы пользовательского интерфейса Material.
• Невозможно настроить типы цветовой палитры в теме пользовательского интерфейса Material в TypeScript.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ng-applied