reactjs - 将常规引导代码转换为 React Bootstrap 样式的组件

Question

我正在关注一个教程，其中有人教我如何编写 Bootstrap 代码。他们使用以下代码创建了一个跨越整个浏览器宽度的顶部栏

CSS

    .top-bar {
      background: #7aaec4;
      height: 2.8rem;
      padding: .5rem 0;
    }
    .topbar a {
      color: #fff;
      text-decoration: none;
      font-size: 1.1rem;
    }

HTML 代码

    <div class="top-bar">
      <div class="container">
        <div class="col-12 text-right">
          <p>
            <a href="tel:[phone]">Call us at [phone]</a>
          </p>
        </div>
      </div>
    </div> 

上面的代码创建了跨越浏览器宽度并具有特定高度的顶部栏。

现在我试图获得相同的行为，但使用 react-bootstrap 和 styled-components。所以我写了这段代码

    import React from 'react';
    import {Container, Row, Col} from 'react-bootstrap';
    import styled from 'styled-components';
    
    const Styles = styled.div`
      background: #7aaec4;
      height: 2.8rem;
      padding: .5rem 0;
      text-align: right;
    
      a {
        color: #fff;
        text-decoration: none;
        font-size: 1.1rem;
      }; 
    `;
    
    export const TopBar = () => {return (
      <Container>
        <Styles>
          <Row>
            <Col xs={12} sm={12} md={12} lg={12} xl={12}>
              <a href="tel:[phone]">Call us at [phone]</a>
            </Col>
          </Row>
        </Styles>
      </Container>
    )}

然后最后使用我的组件作为

    <React.Fragment>
      <GlobalStyles />
      <TopBar />
      <div>Hello World</div>
    </React.Fragment>

我看到顶栏没有在浏览器屏幕上运行。看起来像这样

标签： reactjstypescriptreact-bootstrapstyled-components