代码之家 › 专栏 › 技术社区 › user3629892

在MUI中为亮模式和暗模式定义自定义CSS变量

material-ui typescript reactjs

user3629892 · 技术社区 · 6 月前

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

declare module '@mui/material/styles' {
  interface Theme {
    myVariable: string;
  }
  interface ThemeOptions {
    myVariable?: string;
  }
}

export const theme = createTheme({
  cssVariables: {
    cssVarPrefix: 'abc',
    colorSchemeSelector: 'class',
  },
  colorSchemes: {
    dark: true,
  },
});

我怎么能有不同的价值观 myVariable 对于黑暗和光明模式?

因此,在黑暗模式下,该值可能为 'a' 在灯光模式下 'b'

2 回复 | 直到 6 月前

Eduardo Grigull 6 月前

themeTypes.ts

export interface CustomPaletteExtensions {
    customVariable: string;
}

declare module '@mui/material/styles' {
    interface Palette extends CustomPaletteExtensions {}
    interface PaletteOptions extends Partial<CustomPaletteExtensions> {}
}

import { createTheme } from '@mui/material/styles';
import './themeTypes';

const lightTheme = createTheme({
    palette: {
        mode: 'light',
        customVariable: '#fff'
    }
}
export default lightTheme;

并在ThemeProvider中应用它们:

<ThemeProvider theme={theme}>
    {children}
</ThemeProvider>

你可以使用类似

styles={{ color: "customVariable" }}

user3629892 6 月前

我使用的最终版本与提供的答案略有不同,但决定性的提示是使用 Palette

export interface CustomPaletteExtensions {
  customBackground: string;
}

declare module '@mui/material/styles' {
  interface Palette extends CustomPaletteExtensions {}

  interface PaletteOptions extends Partial<CustomPaletteExtensions> {}
}

const theme = createTheme({
  cssVariables: {
    cssVarPrefix: 'abc',
    colorSchemeSelector: 'class',
  },
  colorSchemes: {
    dark: {
      palette: {
        customBackground: '#2e2f3b',
      },
    },
    light: {
      palette: {
        customBackground: '#ffffff',
      },
    },
  },
});

export const theme;

var(--abc-palette-customBackground)

推荐文章

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

1 年前

mettamyron · 具有多用途的材质UI滑块单击时状态重复

1 年前

MatterOfFact · React:Formik形式的物料UI单选按钮组重置不起作用

1 年前

assembler · MUI 5自动完成将禁用的项目样式更改为不使用不透明

2 年前

Terje Nygård · 反应18和材料UI(@mui)。样式不会附加到主题中

2 年前

Alexander Farber · 如何在MUI X DataGrid列中显示img?

2 年前

ian · 使用“responsiveFontSizes”与“experiental_extendTheme”和“experimental_CssVarsProvider”反应MUI`

2 年前

beuluis · MaterialUI样式在带Vite的Shadow DOM中安装不正确的问题

2 年前

ismail.khn · 如何更改MUI日期选择器的“选择日期”标签?

2 年前

Donko · 单击时如何从MUI自动完成、文本字段中删除占位符文本?[副本]

2 年前