typescript 如何通过主题选项将MUI v5主题拆分为单独的文件？

c3frrgcw 于 2022-11-18 发布在 TypeScript

关注(0)|答案(1)|浏览(157)

我有一个非常大的MUI v5主题，大约有800行（包括TypeScript类型扩展）。

let myTheme = createTheme({
  palette: {
    primary: {
      // lots of custom props
    },
    secondary: {
      // lots of custom props
    },
  },

  typography: {
    // lots of custom variants
  },
});

我想把这个大文件按主题道具拆分成单独的文件。像这样：

palette.ts
typography.ts
...等等。

然后在theme.ts中创建一个基于这些文件的主题。我该怎么做呢？以及在这种情况下如何管理TypeScript类型增加（在哪里保存类型增加）。

typescript

来源：https://stackoverflow.com/questions/74475515/how-to-split-mui-v5-theme-into-separate-files-by-theme-options

1条答案

按热度按时间

eivnm1vs1#

你没有完全展开主题代码和主题道具，但我通常从一个名为theme的目录构建我的主题，我的createTheme在一个 index.js 文件中：

主要

primary.ts* 及其逻辑

const primary = {
  // lots of custom props
}

export default primary

次要

secondary.ts* 及其逻辑

const secondary = {
  // lots of custom props
}

export default secondary

排版

typography.ts* 及其逻辑

const typography = {
  // lots of custom props
}

export default typography

主题

引入文件并添加它们：

import primary from './primary.ts'
import secondary from './secondary.ts'
import typography from './typography.ts'

const myTheme = createTheme({
  palette: {
    primary,
    secondary
  },
  typography
});

赞(0）回复(0）举报 2022-11-18

我来回答

typescript 如何通过主题选项将MUI v5主题拆分为单独的文件？

1条答案

主要

次要

排版

主题

相关问题

热门标签

最新问答