Drawer in material-ui v1.0 doesn't work with typescript

Question

I am getting the following error when I want to use Drawer from [email protected] with typescript:

TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Re...'. Type '{ children: Element; }' is not assignable to type 'Readonly>'. Property 'type' is missing in type '{ children: Element; }'.

Here is how I use it:

<Drawer>
   <List>
      <ListItem>
         Item
      </ListItem>
   </List>
</Drawer>

Used dependencies:

"@types/history": "4.6.0",
"@types/material-ui": "^0.18.0",
"@types/react": "^16.0.5",
"@types/react-dom": "15.5.1",
"@types/react-hot-loader": "3.0.3",
"@types/react-redux": "4.4.45",
"@types/react-router": "4.0.12",
"@types/react-router-dom": "4.0.5",
"@types/react-router-redux": "5.0.3",
"@types/webpack": "2.2.15",
"@types/webpack-env": "1.13.0",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"css-loader": "0.28.4",
"domain-task": "^3.0.3",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"history": "4.6.3",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"material-ui": "^1.0.0-beta.10",
"material-ui-icons": "^1.0.0-beta.10",
"node-noop": "1.0.0",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.5",
"react-router-dom": "4.1.1",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.1",
"redux-thunk": "2.2.0",
"style-loader": "0.18.2",
"typeface-roboto": "0.0.35",
"typescript": "^2.5.2",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0"

Am I doing something wrong? Thanks!

Romain Muelle Romain Muelle · Accepted Answer · 2017-09-29T09:46:31

Property 'type' is missing in type

You need to specify type property. you have 3 choices if you look DrawerProps

export interface DrawerProps extends ModalProps {
  anchor?: 'left' | 'top' | 'right' | 'bottom';
  elevation?: number;
  enterTransitionDuration?: number;
  leaveTransitionDuration?: number;
  open?: boolean;
  SlideProps?: SlideProps & StyledComponentProps<any>;
  theme?: Theme;
  type: 'permanent' | 'persistent' | 'temporary';
}

my typescript code in V1.0.0:

        <Button onClick={() => this.IsPrinting = true}>Open Right</Button>
        <Drawer
        type="temporary"
  anchor="right"
  open={this.IsPrinting}
  onRequestClose={() => this.IsPrinting = false}>
  <div className="rightDrawer"></div>
</Drawer>

.rightDrawer {
  width: 400px;
  flex: 'initial';
}

dependencies used :

"material-ui": "^1.0.0-beta.12",
"material-ui-icons": "^1.0.0-beta.10",

Drawer in material-ui v1.0 doesn't work with typescript

1 Answers