[Drawer] Fix PaperProps className merge (mui#18866)

packages/material-ui/src/Drawer/Drawer.js

@@ -134,6 +134,7 @@ const Drawer = React.forwardRef(function Drawer(props, ref) {
     <Paper
       elevation={variant === 'temporary' ? elevation : 0}
       square
+      {...PaperProps}
       className={clsx(
         classes.paper,
         classes[`paperAnchor${capitalize(anchor)}`],
@@ -142,7 +143,6 @@ const Drawer = React.forwardRef(function Drawer(props, ref) {
         },
         PaperProps.className,
       )}
-      {...PaperProps}
     >
       {children}
     </Paper>

packages/material-ui/src/Drawer/Drawer.test.js

@@ -1,16 +1,18 @@
 import React from 'react';
-import { assert } from 'chai';
+import { assert, expect } from 'chai';
 import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils';
 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import describeConformance from '../test-utils/describeConformance';
 import Slide from '../Slide';
 import Paper from '../Paper';
 import Modal from '../Modal';
 import Drawer, { getAnchor, isHorizontal } from './Drawer';
+import { createClientRender } from 'test/utils/createClientRender';
 
 describe('<Drawer />', () => {
   let mount;
   let classes;
+  const render = createClientRender({ strict: false });
 
   before(() => {
     // StrictModeViolation: uses Slide
@@ -217,6 +219,17 @@ describe('<Drawer />', () => {
     });
   });
 
+  describe('prop: PaperProps', () => {
+    it('should merge class names', () => {
+      const { container } = render(
+        <Drawer PaperProps={{ className: 'my-class' }} variant="permanent">
+          <h1>Hello</h1>
+        </Drawer>,
+      );
+      expect(container.querySelector(`.${classes.paper}`)).to.have.class('my-class');
+    });
+  });
+
   describe('slide direction', () => {
     it('should return the opposing slide direction', () => {
       const wrapper = mount(