title: How do you set the namespace for styled components when using create-react-app?
body: <p>I'm creating a react app with <code>create-react-app</code>. I want to avoid having to eject the webpack config, but I want more control over how my classes are generated.</p>
  <p>I'm currently using <code>react-app-rewired</code> and <code>react-app-rewire-styled-components</code> to try and customize the way my styled-component classes are compiled.</p>
  <p><a href="https://styled-components.com/docs/tooling#namespace" rel="nofollow noreferrer">According to the documentation this should be possible</a> by setting the <code>namespace</code></p>
  <p>This is my <code>config-overrides.js</code>:</p>
  <pre><code>const rewireStyledComponents = require('react-app-rewire-styled-components');
  
  module.exports = function override(config, env) {
  
      config = rewireStyledComponents(config, env, {
          &quot;displayName&quot;: false,
          &quot;namespace&quot;: &quot;my-app&quot;
      });
  
      return config;
  }
  </code></pre>
  <p>Now with this config I would expect my class that was previously generated as <code>hfil7l-0 lmhJTL</code> to now be generated as <code>my-app-hfil7l-0 lmhJTL</code>.
  However, this does not seem to work.</p>
  <p>I want to use <code>namespace</code> specifically because <code>displayName</code> and <code>fileName</code> give me too little control. I'm loading several apps on the same page and some share components that are extended <code>styled-components</code>, so I have to make sure I can make all the classes for each app are unique.</p>
  <p>What am I missing here?</p>