Question

我正在使用React和Ruby on Rails创建一个Web应用程序，但是我的样式组件没有显示。当我拥有前两个样式组件时，它工作正常，但在制作了第三个样式组件后，即使删除了第三个组件，也无济于事。运行滑轨后，我的屏幕现在完全空白。

这是我的代码

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按钮：'StyledComponent <“ a”，任何{}，从不> 并且所有标签都具有相同的消息，因此似乎没有读取Jumbtron中的样式化组件。有人可以帮我吗？

Answer 1

能否提供更多信息，添加组件代码，显示如何添加样式。您在浏览器控制台中是否还有任何错误？也许您可以检查一些错误日志

反应样式化的组件未显示在屏幕上

1 个答案: