使用打字稿時，不存在「主題」屬性

Question

我正在使用打字稿和material-ui v1.x測試版創建ReactJS初學者項目。

主題解釋在：https://material-ui-1dab0.firebaseapp.com/customization/themes/ 不起作用。 Typescript抱怨屬性「主題」不存在。我一直在用@ types/material-ui中的index.d.ts來替換接口'muiTheme'到'theme'，這會導致很多其他錯誤。

當使用'muiTheme'屬性代替錯誤消失時，但只使用默認顏色表示我的自定義主題根本沒有使用。

我的代碼：

import * as React from 'react'; 
import { MuiThemeProvider } from 'material-ui/styles'; 
import createMuiTheme from 'material-ui/styles/theme'; 
import createPalette from 'material-ui/styles/palette'; 
import { teal, bluegrey, red } from 'material-ui/colors'; 
import Button from 'material-ui/Button'; 

const theme: any = createMuiTheme({ 
    palette: createPalette({ 
    primary: teal, // Purple and green play nicely together. 
    accent: { 
     ...bluegrey, 
     A400: '#00e677', 
    }, 
    error: red, 
    }), 
}); 

function Palette() { 
    return (
    <MuiThemeProvider theme={theme}> 
     <div> 
     <Button color="primary"> 
      {'Primary'} 
     </Button> 
     <Button color="accent"> 
      {'Accent'} 
     </Button> 
     </div> 
    </MuiThemeProvider> 
); 
} 

打字稿：

(21,23): error TS2339: Property 'theme' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MuiThemeProvider> & Readonly<{ children?: ReactNod...'. 

Answer 1

如果您使用的是material-ui V1，那麼您不再使用@types類型隨包裝一起提供。只需在"types": "material-ui"中將您的tsconfig文件指向它，並在"typeRoots"部分中有node_modules。

例

"compilerOptions": { 
    "typeRoots": [ 
     "node_modules/@types", 
     "node_modules" 
    ], 
    "types": [ 
     "node", "jest", "lodash", "react", 
     "react-dom", "react-redux", "redux-logger", "material-ui", 
     "react-router-dom", "react-router-redux", 
     "redux", "binary-type-tree", "redux-form", 
     "tedb", "react-tap-event-plugin", 
     "react-hot-loader", "material-ui-icons" 
    ], 
    "outDir": "dist" 
}, 
"include": [ 
    "src", 
    "node_modules/**/*.d.ts", 
    "node_modules/@types/**/*.d.ts" 
], 

這當然會改變你的項目，該項目幾乎完全重寫，我不得不返工我的項目使用V1。

Answer 2

<MuiThemeProvider theme={theme}>

爲mui類型定義是過時的/不正確。如果mui是用TypeScript編寫的，這不會成爲問題。

更多

要改變，在這裏提供了一個修復：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/material-ui/index.d.ts爲PR。

首選TypeScript第一包

例如， blueprintjs，因爲他們不會遇到這樣的問題。更多：https://basarat.gitbooks.io/typescript/content/docs/quick/nodejs.html