【发布时间】：2022-01-06 22:36:30
【问题描述】：
我正在尝试为主题添加自定义颜色，但我无法通过 theme.pallete 从托盘访问颜色，这是我的主题部分：
import { createTheme } from "@mui/material/styles";
type BackgroundType = {
background?: string;
onBackground?: string;
surface?: string;
onSurfaceHigh?: string;
onSurfaceLow?: string;
};
type Gradient = {
main?: string;
gradientRtl?: string[];
gradientLtr?: string[];
gradientDarkRtl?: string[];
gradientDarkLtr?: string[];
onGradientLight?: string;
onGradientDark?: string;
};
type meta = {
inpute?: string;
inputeActive?: string;
outlineButton?: string;
outlineButtonText?: string;
line?: string;
};
declare module "@mui/material/styles" {
export interface PaletteOptions {
Gradient: Gradient;
Accent: PaletteOptions["primary"];
Background: BackgroundType;
Meta: meta;
}
export interface Palette {
Gradient: Gradient;
Accent: PaletteOptions["primary"];
Background: BackgroundType;
Meta: meta;
}
export interface SimplePaletteColorOptions {
onLight?: string;
onDark?: string;
containerLight?: string;
containerDark?: string;
onContainerLight?: string;
onContainerDark?: string;
ButtonLight?: string;
ButtonDark?: string;
onButtonLight?: string;
onButtonDark?: string;
}
const theme = createTheme(
{
direction: "rtl",
typography: {
fontFamily: [
"dana",
"dana-number",
"Open Sans",
"Roboto",
"Arial",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
'"Helvetica Neue"',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(","),
},
palette:{
Gradient: {
main: "#4FC3F7",
gradientLtr: ["#4FC3F7", "#51ABF4"],
gradientRtl: ["#4FC3F7", "#51ABF4"],
onGradientLight: "#FFFFFF",
onGradientDark: "#000000",
gradientDarkRtl: ["#4FC3F7", "#51ABF4"],
gradientDarkLtr: ["#51ABF4", "#4FC3F7"],
},
primary: {
main: "#51ABF4",
light: "#51ABF4",
dark: "#51ABF4",
onLight: "#FFFFFF",
onDark: "#102231",
containerLight: "#DCEEFD",
onContainerLight: "#204462",
containerDark: "#316792",
onContainerDark: "#B9DDFB",
},
secondary: {
main: "#4FC3F7",
light: "#4FC3F7",
onLight: "#FFFFFF",
containerLight: "#DCF3FD",
onContainerLight: "#204E63",
dark: "#4FC3F7",
onDark: "#102731",
containerDark: "#2F7594",
onContainerDark: "#B9E7FC",
},
Accent: {
main: "#9980FF",
light: "#9980FF",
onLight: "#FFFFFF",
containerLight: "#EBE6FF",
onContainerLight: "#3D3366",
ButtonLight: "#AD99FF",
onButtonLight: "#FFFFFF",
dark: "#AD99FF",
onDark: "#1F1A33",
containerDark: "#5C4D99",
onContainerDark: "#D6CCFF",
},
error: {
main: "#DC3545",
light: "#DC3545",
onLight: "#FFFFFF",
contrastText: "#FFFFFF",
containerLight: "#F2B5BB",
onContainerLight: "#58161D",
ButtonLight: "#E3606D",
onButtonLight: "#FFFFFF",
dark: "#E3606D",
onDark: "#2C0B0E",
containerDark: "#2C0B0E",
onContainerDark: "#F1AFB6",
},
warning: {
main: "#EFA82D",
light: "#EFA82D",
onLight: "#FFFFFF",
contrastText: "#FFFFFF",
containerLight: "#F9E1B6",
onContainerLight: "#604312",
dark: "#F2B957",
onDark: "#302209",
containerDark: "#8F651B",
onContainerDark: "#F9DCAB",
},
success: {
main: "#28AB46",
light: "#28AB46",
onLight: "#FFFFFF",
contrastText: "#FFFFFF",
containerLight: "#ACEBBB",
onContainerLight: "#08220E",
dark: "#53BC6B",
onDark: "#08220E",
containerDark: "#18672A",
onContainerDark: "#A9DDB5",
},
Background: {
background: "#F5F8FC",
onBackground: "#61666B",
surface: "#FFFFFF",
onSurfaceHigh: "#4E5256",
onSurfaceLow: "#818589",
},
Meta: {
inpute:"#A0A3A6",
inputeActive:"#61666B",
outlineButton:"#A0A3A6",
outlineButtonText:"#61666B",
line:"#DFE0E1"
},
});
export default theme;
}
我在@mui/material/styles 上声明了一个模块，但它似乎不起作用，因为当我尝试访问例如重音调色板选项时，我得到即使我无法访问它也没有选项错误从我的 vs 代码自动完成。我只是按照文档说的做我做错了吗？
【问题讨论】：
标签： reactjs typescript material-ui