diff --git a/packages/client/package.json b/packages/client/package.json index fef0bcee45a3bfabda06091ba88d37b14b9d4cfd..7a1565ee3771bc85bdf1b4a7569982b1ee80b010 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -42,7 +42,7 @@ "redux-logger": "^3.0.1", "redux-thunk": "^2.2.0", "reselect": "^3.0.1", - "styled-components": "^3.2.5", + "styled-components": "^4.1.1", "styled-normalize": "^3.0.1", "subscriptions-transport-ws": "^0.9.12" }, diff --git a/packages/client/src/components/Root.js b/packages/client/src/components/Root.js index fa6c1f2c4eadd518b54bf0b193f4f0d6edcd64ee..825e95ed03340fbd8f2d287b05b39a8cce38a380 100644 --- a/packages/client/src/components/Root.js +++ b/packages/client/src/components/Root.js @@ -12,9 +12,8 @@ import { getMainDefinition } from 'apollo-utilities' import { setContext } from 'apollo-link-context' import { InMemoryCache } from 'apollo-cache-inmemory' import { createUploadLink } from 'apollo-upload-client' -import StyleRoot, { injectGlobalStyles } from '../helpers/StyleRoot' - -injectGlobalStyles() +import { Normalize } from 'styled-normalize' +import StyleRoot from '../helpers/StyleRoot' // Construct an ApolloClient. If a function is passed as the first argument, // it will be called with the default client config as an argument, and should @@ -71,6 +70,7 @@ const Root = ({ <Provider store={store}> <ConnectedRouter history={history}> <ThemeProvider theme={theme}> + <Normalize /> <StyleRoot>{routes}</StyleRoot> </ThemeProvider> </ConnectedRouter> diff --git a/packages/client/src/helpers/StyleRoot.js b/packages/client/src/helpers/StyleRoot.js index 936df7878154a2066b6da63944df8d9a02919d26..7d0c0f85ca8936bccc4b1dd036387cfa3612fa12 100644 --- a/packages/client/src/helpers/StyleRoot.js +++ b/packages/client/src/helpers/StyleRoot.js @@ -1,11 +1,6 @@ -import styled, { injectGlobal } from 'styled-components' -import styledNormalize from 'styled-normalize' +import styled from 'styled-components' import { th } from '@pubsweet/ui-toolkit' -const injectGlobalStyles = () => injectGlobal` - ${styledNormalize} -` - const StyleRoot = styled.div` background-color: ${th('colorBackground')}; font-family: ${th('fontInterface')}, sans-serif; @@ -19,4 +14,3 @@ const StyleRoot = styled.div` ` export default StyleRoot -export { injectGlobalStyles }