Пользовательская тема палитры 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",
},
}
},
},
"vars": {
"palette": {
"common": {
"black": "var(--mui-palette-common-black, #000)",
"white": "var(--mui-palette-common-white, #fff)",
"background": "var(--mui-palette-common-background, #fff)",
"onBackground": "var(--mui-palette-common-onBackground, #000)",
"backgroundChannel": "var(--mui-palette-common-backgroundChannel, 255 255 255)",
"onBackgroundChannel": "var(--mui-palette-common-onBackgroundChannel, 0 0 0)"
},
"primary": {
"main": "var(--mui-palette-primary-main, #1976d2)",
"light": "var(--mui-palette-primary-light, #42a5f5)",
"dark": "var(--mui-palette-primary-dark, #1565c0)",
"contrastText": "var(--mui-palette-primary-contrastText, #fff)",
"mainChannel": "var(--mui-palette-primary-mainChannel, 25 118 210)",
"lightChannel": "var(--mui-palette-primary-lightChannel, 66 165 245)",
"darkChannel": "var(--mui-palette-primary-darkChannel, 21 101 192)",
"contrastTextChannel": "var(--mui-palette-primary-contrastTextChannel, 255 255 255)"
},
"text": {
"primary": "var(--mui-palette-text-primary, rgba(0, 0, 0, 0.87))",
"secondary": "var(--mui-palette-text-secondary, rgba(0, 0, 0, 0.6))",
"primaryChannel": "var(--mui-palette-text-primaryChannel, 0 0 0)",
"secondaryChannel": "var(--mui-palette-text-secondaryChannel, 0 0 0)"
},
"background": {
"default": "var(--mui-palette-background-default, #fff)",
"defaultChannel": "var(--mui-palette-background-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: {
palette: {
background: {
default: blue[900]
},
primary: {
main: blue[900],
contrastText: blue[200],
},
secondary: {
main: indigo[500],
/*contrastText: indigo[100],*/
}
},
},
},
});

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