conflict with React-Router and/or React-Redux-Form

[yodacom]

When added Rewire and rewireStyledComponents config file to my "create-react-app" code:

const rewireStyledComponents = require('react-app-rewire-styled-components');

module.exports = function override(config, env) {
  config = rewireStyledComponents(config, env);
  return config;
};

my form page styles were lost. And when we selected a new or clicked on back arrow in the browser the former page now had lost styles as well. So we think the conflict is somehow connected to the router.

Once we removed the reference to:

"start": "react-app-rewired start",

and changed it: back to the original start script:

"start": "react-scripts start",

styles returned as they should. The key problem page also had a Redux-Form component on it as well so not sure if that was a contributing factor or not.

the root component used React Router and the ThemeProvider with a Wrapper as so: app.js

render() {
    return (
      <ThemeProvider theme={Theme}>
        <Wrapper>
          <Router>
            <div>
              <Route exact path="/" component={AuctionPage} />
              <Route path="/browse" component={BrowseAuctionPage} />
              <Route path="/detail" component={ItemDetailPage} />
              <Route path="/submit" component={SubmitItemPage} />
            </div>
          </Router>
        </Wrapper>
      </ThemeProvider>

wrapper.js

import styled from 'styled-components';

export default styled.div`
  display: grid;
  grid-template-columns: 1fr;
  margin-right: auto;
  margin-left: auto;
  grid-template-rows: auto;

  max-width: 960;

  padding-right: 10px;
  padding-left: 10px;
`;

Let me know what you would need to investigate further..

All the best,

Jeremy