Я знаю, что есть много сообщений с похожими заголовками, но я не знаю, как быть более конкретным вкратце.
Я создал эту пользовательскую палитру, просмотрел документацию и связанные сообщения StackOverflow (см. конец сообщения) и просто не могу понять, в чем дело.
Текущее теория дело в том, что я либо вставляю импортированные темы, либо разделяю тему между файлами, но я не понимаю, почему это так. (Я добавляю темы таким многофайловым способом, потому что этот проект, по сути, представляет собой несколько веб-сайтов, объединенных в одну службу хостинга).
Я настроил этот проект с помощью Vite, который обошёл кошмар управления пакетами и версиями, но, может быть, это как-то вызывает проблему?
В этом коде нет ошибок или предупреждений при компиляции или запуске.
Краткое описание файлов:
- App.tsx: главная страница.
- global_theme.tsx: разрешение светлого и темного режима, разрешение переменных CSS, установка значений точек останова.
- theme.tsx: содержит фактические переменные палитры, которые я пытаюсь использовать.
Я вижу базовые цвета MUI — изображение здесь.
Выдержки из console.log(homeTheme())
- Точки останова: ожидается
- Цветовые темы не применяются к объекту homeTheme
Код: Выделить всё
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)",
},
},
},
}
Код: Выделить всё
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 (
{/* Pale light blue */}
{/* Less pale light blue */}
{/* Very dark blue */}
Zach M
)
}
export default App
Код: Выделить всё
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;
Код: Выделить всё
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: '#0b1d23ff',
},
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
