title: React styled components not displaying on screen
body: <p>I am creating a web application using React and Ruby on Rails but my style components are not showing up. It worked fine when I had the first two style components but after making the third nothing works even when I removed the third component. After running rails my screen is now completely blank.</p>
  
  <p>This is my code </p>
  
  <pre><code>import styled from 'styled-components'
  
  const Section = styled.section`
  
     background-color: #d74234
     min-height: 550px;
     padding: 100px 0;
     color: #fff;
  `;
  
  const Header = styled.h1`
  
     color: #fff;
     font-weight: 700;
     font-size: 40px;
     line-height: 52px
  `;
  
  const Subhead = styled.p`
  
     font-size: 18px;
     font-weight: 500;
  `;
  const Button = styled.a`
  
     display: inline-block;
     text-decoration: none;
     font-weight: bold;
     cursor: pointer;
     border-radius: 0;
     background: #fff;
     color: #333 !important;
     padding: 10px 20px;
     font-size: 18px;
     width: 100%;
     box-shadow: 0px 0px 0px 3px #473228,
       -6px 6px #ef5f17,
       -6px 6px 0px 3px #473228;
  `;
  
  const Jumbotron = () =&gt; {
      return (
        &lt;Section className="home-section--1"&gt;
            &lt;div className="container"&gt;
                &lt;div className="row"&gt;
                    &lt;div className="col col-sm-12 col-md-5"&gt;
                        &lt;div className="pt-4 mt-4"&gt;
                            &lt;Header&gt;Curiosity Voyage!&lt;/Header&gt;
                            &lt;Subhead&gt;Where all your random questions are answered&lt;/Subhead&gt;
                            &lt;div className = "cta-wrapper"&gt;
                              &lt;Button className= "btn fancy-btn"&gt;Explore&lt;/Button&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div className="col col-sm-12 col-md-7"&gt;
                        &lt;div className="pt-4 mt-4 text-center"&gt;
  
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/Section&gt;
      )
  }
  
  export default Jumbotron 
  </code></pre>
  
  <p>I tried two solutions and neither worked, I included a backtick just before the semi-colons and also tried adding curly braces just before the styling.</p>
  
  <p>I took a look at some info on Visual Studio and the styled-components within the section tag and got this message </p>
  
  <p>const Button: 'StyledComponent&lt;"a", any, {}, never>
  and all of the tags have the same message, so it seems like it's not reading the styled-components within the Jumbtron. Can anyone help me with this please?</p>