title: Styled Components generated class names are messing my layout with React-Bootstrap
body: <p>I'm using react-bootstrap along with styled components. So far everything was perfect but now there is a <code>div</code> with a <code>className</code> that keeps changing every now and then. This <code>div</code> has a height of <code>450px</code> and it's on top of my Main Layout, limiting the height of everything else.</p>
  
  <p>The syntax i'm using on my components is something like:</p>
  
  <pre><code>import styled from 'styled-components'
  
  const Styles = styled.div`
    .input-group-prepend {
      padding-top:11px;
      padding-right:10px;
    }
  
    .login-input {
      background-color: #6C63FF;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-radius: 0;
      padding: 0;
      width: 240px;
      color:white;
      font-size:0.80rem;
    }
  
  export const Input = (props) =&gt; {
    const { type, placeholder, } = props
    return (
      &lt;Styles&gt;
        &lt;InputGroup className="my-4"&gt;
          &lt;InputGroup.Prepend&gt;
              {props.children}
          &lt;/InputGroup.Prepend&gt;
          &lt;FormControl
            className='login-input'
            placeholder={placeholder}
            aria-label={placeholder}
          /&gt;
        &lt;/InputGroup&gt;
      &lt;/Styles&gt;
    )
  }
  </code></pre>
  
  <p><strong>My App Component</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import Routes from './Routes'
  
  import { ThemeProvider } from 'styled-components'
  import { theme } from './theme'
  
  class App extends Component {
      render() {
          return (
              &lt;ThemeProvider theme={theme}&gt;
                  &lt;Routes /&gt;
              &lt;/ThemeProvider&gt;
          )
      }
  }
  
  export default App;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/bYPUa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bYPUa.png" alt="ChromeTools"></a></p>
  
  <p><strong>What i've tried so far:</strong></p>
  
  <ul>
  <li>Removed the ThemeProvider </li>
  <li>Put the routes straight into index.js (Can i do this or is a bad practice?)</li>
  <li>Reinstalled the packages via NPM</li>
  <li>Refactoring on components as well</li>
  </ul>
  
  <p>Is there something I'm missing and if that is the case, what is it?
  Thanks in advance for your help.</p>