Реагировать стилизованные компоненты не отображаются на экране

Question

Я создаю веб-приложение с использованием React и Ruby on Rails, но мои компоненты стиля не отображаются. Он работал нормально, когда у меня были первые два компонента стиля, но после создания третьего ничего не работало, даже когда я удалил третий компонент. После запуска рельсов мой экран теперь полностью пустой.

Это мой код

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 = () => {
    return (
      <Section className="home-section--1">
          <div className="container">
              <div className="row">
                  <div className="col col-sm-12 col-md-5">
                      <div className="pt-4 mt-4">
                          <Header>Curiosity Voyage!</Header>
                          <Subhead>Where all your random questions are answered</Subhead>
                          <div className = "cta-wrapper">
                            <Button className= "btn fancy-btn">Explore</Button>
                          </div>
                      </div>
                  </div>
                  <div className="col col-sm-12 col-md-7">
                      <div className="pt-4 mt-4 text-center">

                      </div>
                  </div>
              </div>
          </div>
      </Section>
    )
}

export default Jumbotron 

Я попробовал два решения, но ни одно из них не работало, я включил обратную галочку перед точками с запятой и также попыталсядобавление фигурных скобок непосредственно перед стилем.

Я взглянул на некоторую информацию о Visual Studio и стилевых компонентах в теге section и получил это сообщение

const Button: 'StyledComponent <"a ", any, {}, never>, и все теги имеют одно и то же сообщение, поэтому кажется, что он не читает компоненты стиля внутри Jumbtron. Может ли кто-нибудь помочь мне с этим, пожалуйста?

Answer 1

Не могли бы вы предоставить больше информации, добавить код ваших компонентов, показать, как вы добавили стили. Также у вас есть какие-либо ошибки в консоли браузера? может быть, вы можете проверить некоторые журналы ошибок