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

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

  •  0
  • 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 月前
        1
  •  1
  •   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" }}
    
        2
  •  0
  •   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)