跳转到内容
VertiTab

参考文档

参考文档

Section titled “参考文档”

VertiTab 自定义主题系统技术参考指南。

官方文档链接

Section titled “官方文档链接”

MUI 官方资源

Section titled “MUI 官方资源”

主题结构概览

Section titled “主题结构概览”

基础信息

Section titled “基础信息”
{
  id: 'ultraviolet',
  name: 'Ultra Violet',
  description: 'Pantone Color of the Year 2018 - Ultra Violet with mysterious and creative purple tones',
  isBuiltIn: true,
  themeIndex: 17
}

颜色方案

Section titled “颜色方案”
colorSchemes: {
  light: {
    palette: {
      // 主要色调
      primary: { main: '#6B46C1' },
      secondary: { main: '#A855F7' },
      error: { main: '#DC2626' },
      warning: { main: '#D97706' },
      info: { main: '#2563EB' },
      success: { main: '#059669' },
      // 背景色
      background: {
        default: '#FEFBFF',
        paper: '#FAF7FF',
      },
      // 文字色
      text: {
        primary: '#1A1A1A',
        secondary: '#4A4A4A',
        disabled: '#9E9E9E',
      },
      // 动作色
      action: {
        active: '#5B21B6',
        hover: 'rgba(107, 70, 193, 0.08)',
        selected: 'rgba(107, 70, 193, 0.3)',
        focus: 'rgba(107, 70, 193, 0.16)',
      },
      divider: '#F3F0FF',
    },
  },
  dark: {
    // 深色模式配置...
  }
}

字体排版

Section titled “字体排版”
typography: {
  htmlFontSize: 16,
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
  fontSize: 14,
  h1: {
    fontWeight: 500,
    fontSize: '1.5rem',
    lineHeight: 1.3
  },
  h4: {
    fontWeight: 400,
    fontSize: '0.875rem',
    lineHeight: 1.4
  },
  body1: {
    fontWeight: 400,
    fontSize: '0.875rem',
    lineHeight: 1.5
  },
  button: {
    fontWeight: 400,
    fontSize: '0.875rem',
    lineHeight: 1.75
  }
}

关键组件示例

Section titled “关键组件示例”

CSS 基线设置

Section titled “CSS 基线设置”
MuiCssBaseline: {
  defaultProps: {
    enableColorScheme: true
  },
  styleOverrides: {
    html: {
      fontSize: "16px"
    },
    body: {
      background: undefined,
      "-webkit-font-smoothing": 'antialiased',
      "-moz-osx-font-smoothing": 'grayscale'
    }
  }
}

列表项按钮

Section titled “列表项按钮”
MuiListItemButton: {
  defaultProps: {
    dense: true,
    disableGutters: false,
    divider: false,
    disableRipple: false
  },
  styleOverrides: {
    root: {
      borderRadius: '6px',
      paddingTop: '4px',
      paddingRight: '8px',
      paddingBottom: '4px',
      paddingLeft: '8px',
      '&:hover': {
        backgroundColor: 'rgba(107, 70, 193, 0.08)',
        boxShadow: '0 2px 8px rgba(107, 70, 193, 0.15)',
        transform: 'translateY(-1px)'
      }
    }
  }
}

图标按钮

Section titled “图标按钮”
MuiIconButton: {
  defaultProps: {
    disableRipple: false,
    disableFocusRipple: false,
    color: 'primary',
    size: 'small'
  },
  styleOverrides: {
    root: {
      padding: '4px',
      margin: 0,
      borderRadius: '6px',
      '&:hover': {
        backgroundColor: 'rgba(107, 70, 193, 0.08)',
        boxShadow: '0 2px 8px rgba(107, 70, 193, 0.2)',
      }
    }
  }
}

图标组件

Section titled “图标组件”
MuiIcon: {
  defaultProps: {
    fontSize: 'small',
    color: 'inherit'
  },
  styleOverrides: {
    root: {
      fontSize: '14px',
    }
  }
},
MuiSvgIcon: {
  defaultProps: {
    fontSize: 'small',
    color: 'inherit'
  },
  styleOverrides: {
    root: {
      fontSize: '14px'
    }
  }
}

头像组件

Section titled “头像组件”
MuiAvatar: {
  defaultProps: {
    variant: 'rounded'
  },
  styleOverrides: {
    root: {
      width: '14px',
      height: '14px',
      fontSize: '14px',
    }
  }
}

菜单组件

Section titled “菜单组件”
MuiMenu: {
  defaultProps: {
    dense: true,
    disableAutoFocusItem: true,
  },
  styleOverrides: {
    paper: {
      borderRadius: '8px',
      paddingTop: '8px',
      paddingBottom: '8px',
      boxShadow: '0 8px 32px rgba(107, 70, 193, 0.15)',
      border: '1px solid rgba(107, 70, 193, 0.1)',
    }
  }
}

按钮组件

Section titled “按钮组件”
MuiButton: {
  defaultProps: {
    color: 'primary',
    disableFocusRipple: false,
    disableRipple: false,
    size: 'small',
  },
  styleOverrides: {
    root: {
      borderRadius: '8px',
      '&:hover': {
        transform: 'translateY(-1px)',
        boxShadow: '0 4px 16px rgba(107, 70, 193, 0.25)'
      }
    }
  }
}

背景设置语法

Section titled “背景设置语法”

纯色

Section titled “纯色”
background: #6b46c1;
background: rgb(107, 70, 193);
background: rgba(107, 70, 193, 0.8);

渐变

Section titled “渐变”
background: linear-gradient(45deg, #6b46c1, #a855f7);
background: radial-gradient(circle, #6b46c1, #a855f7);

图片

Section titled “图片”
background: url("image.jpg") center/cover no-repeat;

主题配置技巧

Section titled “主题配置技巧”

颜色一致性

Section titled “颜色一致性”
  • 使用相同的主色调系列
  • 保持明暗模式的颜色对应
  • 确保足够的对比度

组件协调

Section titled “组件协调”
  • 统一的圆角设计（如 borderRadius: '6px'）
  • 一致的间距模式（如 padding: '4px'）
  • 协调的动画效果

性能优化

Section titled “性能优化”
  • 避免过度复杂的阴影和动画
  • 使用 transform 而非改变布局属性
  • 合理使用 transition 时长

常见问题

Section titled “常见问题”

主题不生效

Section titled “主题不生效”
  1. 检查 JSON 语法是否正确
  2. 确认主题已保存并应用
  3. 清除浏览器缓存重新加载

样式冲突

Section titled “样式冲突”
  1. 检查 CSS 特异性
  2. 使用浏览器开发者工具调试
  3. 确认组件名称拼写正确

性能问题

Section titled “性能问题”
  1. 减少复杂的 CSS 动画
  2. 优化背景图片大小
  3. 限制自定义样式数量

相关文档

Section titled “相关文档”