Css React样式的组件不显示在屏幕上

我正在使用React和RubyonRails创建一个web应用程序，但是我的样式组件没有显示出来。当我有前两个样式组件时，它工作得很好，但在制作了第三个样式组件之后，即使我删除了第三个组件，它也无法工作。运行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 

从“样式化组件”导入样式化
const Section=styled.Section`
背景色：#d74234
最小高度：550px；
填充：100px0；
颜色：#fff；
`;
const Header=styled.h1`
颜色：#fff；
字号：700；
字体大小：40px；
线高：52px
`;
const Subhead=styled.p`
字号：18px；
字号：500；
`;
const Button=styled.a`
显示：内联块；
文字装饰：无；
字体大小：粗体；
光标：指针；
边界半径：0；
背景：#fff；
颜色：#333！重要的；
填充：10px 20px；
字号：18px；
宽度：100%；
盒影：0px 0px 0px 3px#473228，
-6px 6px#ef5f17，
-6px 6px 0px 3px#473228；
`;
常量Jumbotron=（）=>{
返回(
好奇之旅！
在那里你所有的随机问题都得到了回答
探索
)
}
导出默认Jumbotron

我尝试了两种解决方案，但都不起作用，我在分号前加了一个背景标记，还尝试在造型前加上了花括号

我查看了一些关于VisualStudio和section标记中的样式化组件的信息，得到了这条消息

常量按钮：“StyledComponent”

---

所有的标签都有相同的信息，所以它似乎没有读取Jumbtron中的样式化组件。有人能帮我吗？

能否提供更多信息，添加组件代码，展示如何添加样式。

---

您在浏览器控制台中是否也有任何错误？也许你可以查看一些错误日志

对不起，花了一段时间，我必须弄清楚如何正确嵌入代码，我知道没有它没有多大帮助。你已经在代码中关闭了分支

}

，行高：52px；}，能否尝试将其删除？你在`小标题'和按钮嘿，我现在删除了它们，但仍然没有做任何更改。应用程序仍然是一个空白页。错误怎么办？你是否看到任何地方的错误（浏览器控制台、终端、errors.log）如果你有空白页面，这意味着你有语法错误任何地方都没有错误，屏幕只是空白。