diff --git a/packages/component-faraday-ui/src/FileSection.js b/packages/component-faraday-ui/src/FileSection.js
index 596f65e8436d8362ab1fdf506c1f5b1dd822071c..af022f6e5f62708b45a5460b8ce5bc456016553f 100644
--- a/packages/component-faraday-ui/src/FileSection.js
+++ b/packages/component-faraday-ui/src/FileSection.js
@@ -50,13 +50,13 @@ const FileSection = ({
   onDelete,
 }) => (
   <Root
-    innerRef={instance => {
-      connectFileDrop(instance)
-      connectDropTarget(instance)
-    }}
     isFileItemOver={isFileItemOver && canDropFileItem}
     isFirst={isFirst}
     isLast={isLast}
+    ref={instance => {
+      connectFileDrop(instance)
+      connectDropTarget(instance)
+    }}
   >
     <Row alignItems="center">
       <Item>
diff --git a/packages/component-faraday-ui/src/pending/Accordion.js b/packages/component-faraday-ui/src/pending/Accordion.js
index 80182842de1101f9c501e55eb13cbdb983e8cae8..9f93cb2a835bb45bb2ff7788cc8864bd1dbf0299 100644
--- a/packages/component-faraday-ui/src/pending/Accordion.js
+++ b/packages/component-faraday-ui/src/pending/Accordion.js
@@ -51,7 +51,7 @@ class Accordion extends React.Component {
     } = this.props
     const { expanded } = this.state
     return (
-      <Root expanded={expanded} innerRef={r => (this._accordion = r)} {...rest}>
+      <Root expanded={expanded} ref={r => (this._accordion = r)} {...rest}>
         <Header
           expanded={expanded}
           icon={icon}
diff --git a/packages/component-faraday-ui/src/pending/ControlledAccordion.js b/packages/component-faraday-ui/src/pending/ControlledAccordion.js
index c7097b85b158ca11ed8d14032440272318fdf73c..e4f9b30f9df252bf1070d0d561ac527f9a55fc69 100644
--- a/packages/component-faraday-ui/src/pending/ControlledAccordion.js
+++ b/packages/component-faraday-ui/src/pending/ControlledAccordion.js
@@ -42,7 +42,7 @@ class ControlledAccordion extends React.Component {
       ...rest
     } = this.props
     return (
-      <Root expanded={expanded} innerRef={r => (this._accordion = r)} {...rest}>
+      <Root expanded={expanded} ref={r => (this._accordion = r)} {...rest}>
         <Header expanded={expanded} icon={icon} {...rest} />
         {expanded && children}
       </Root>
diff --git a/packages/styleguide/src/Wrapper.js b/packages/styleguide/src/Wrapper.js
index b7641fe72a28e8c036b9fedafa11bf4160950165..37385371012630f05b9f8370d2e8f8da52a3b7d3 100644
--- a/packages/styleguide/src/Wrapper.js
+++ b/packages/styleguide/src/Wrapper.js
@@ -4,8 +4,9 @@ import { reducer } from 'redux-form'
 import { Provider } from 'react-redux'
 import hindawiTheme from 'hindawi-theme'
 import { createLogger } from 'redux-logger'
-import { ThemeProvider } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
 import { client } from 'pubsweet-component-modal'
+import styled, { ThemeProvider } from 'styled-components'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { createStore, combineReducers, applyMiddleware } from 'redux'
 
@@ -20,13 +21,25 @@ const store = createStore(
   applyMiddleware(logger),
 )
 
+const StyleRoot = styled.div`
+  background-color: ${th('colorBackground')};
+  font-family: ${th('fontInterface')}, sans-serif;
+  font-size: ${th('fontSizeBase')};
+  color: ${th('colorText')};
+  line-height: ${th('lineHeightBase')};
+
+  * {
+    box-sizing: border-box;
+  }
+`
+
 class Wrapper extends Component {
   render() {
     return (
       <Provider store={store}>
         <Router>
           <ThemeProvider theme={hindawiTheme}>
-            {this.props.children}
+            <StyleRoot>{this.props.children}</StyleRoot>
           </ThemeProvider>
         </Router>
       </Provider>