title: Is ThemeProvider necessary for theming in styled components?
body: <p>I am using styled components, I am wondering if it is necessary to use a ThemeProvider.</p>
  <p>This is the example in the documentation.</p>
  <pre><code>// Define our button, but with the use of props.theme this time
  const Button = styled.button`
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border-radius: 3px;
  
    /* Color the border and text with theme.main */
    color: ${props =&gt; props.theme.main};
    border: 2px solid ${props =&gt; props.theme.main};
  `;
  
  // We are passing a default theme for Buttons that arent wrapped in the ThemeProvider
  Button.defaultProps = {
    theme: {
      main: &quot;palevioletred&quot;
    }
  }
  
  // Define what props.theme will look like
  const theme = {
    main: &quot;mediumseagreen&quot;
  };
  
  render(
    &lt;div&gt;
      &lt;Button&gt;Normal&lt;/Button&gt;
  
      &lt;ThemeProvider theme={theme}&gt;
        &lt;Button&gt;Themed&lt;/Button&gt;
      &lt;/ThemeProvider&gt;
    &lt;/div&gt;
  );
  </code></pre>
  <p>But I am wondering if I can just do this:</p>
  <pre><code>// theme.js
  const theme = {
    main: &quot;mediumseagreen&quot;
  };
  export default theme;
  
  
  // main.js
  import theme from 'theme';
  
  const Button = styled.button`
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border-radius: 3px;
  
    /* Color the border and text with theme.main */
    color: ${theme.main};
    border: 2px solid ${theme.main};
  `;
  
    render(
    &lt;div&gt;    
        &lt;Button&gt;Themed&lt;/Button&gt;
    &lt;/div&gt;
  );
  </code></pre>
  <p>If I don't need to a <code>Normal Button</code> (all Buttons will be themed), and I don't need dynamic theming (e.g change to a dark mode), could I use the second approach?  are there any drawbacks I didn't think of?</p>