如何在ReactJS中围绕引导窗体绘制边框？

我不熟悉JavaScript和ReactJS

我想要什么

我要创建具有以下布局的页面：

正如您所看到的，这两种形式都有一个边框围绕着它们。这就是我想要的 实现（在注册表单中添加边框）

我为取得结果所做的

我根据创建了一个简单的NodeJS/React应用程序

然后我定义了入口页面（包含两种表单的页面），如下所示：

import React, { Component } from 'react';
import { Button, Row, Col, Jumbotron } from 'react-bootstrap';
import SignUpForm from './SignUpForm';

class EntryPage extends Component {
  render() {
    return (
      <div>
        <Jumbotron>
          <h1>CTR Predictor</h1>
          <p>CTR Predictor allows you to automatically estimate the optimal price for keyword combinations used in search engine marketing campaigns.</p>
        </Jumbotron>
        <Row>
          <Col xs={6} md={3}><SignUpForm /></Col>
          <Col xs={6} md={6}>Place for the login form</Col>
        </Row>
      </div>
    )
  }
}

export default EntryPage;

style.js

与上述文件位于同一目录中，包含以下内容：

const style = {
  signUpForm: {
    border:'2px solid #000000',
  }
}

module.exports = style;

当我运行应用程序时，注册表单周围没有边框

我试图修复错误的内容

我尝试将

bsClass='signUpForm'

（如建议的）添加到中的

FormGroup

声明中

注册表单

，但它没有帮助

---

如何修复此错误（确保显示表单周围的边框）？

首先，我将样式的导入更改为此

导入{signUpForm}，从./style

和此

  <div class="signUpForm">

换成这个

  <div style={signUpForm}>

无论多么重要的注意事项，您使用的是react，因此您无法编写类，react使用

className=“name of class”

---

您正在导出样式，而不是css，因此您需要在样式属性中而不是在类名中使用它。

您可以在您的应用程序中使用style={style.signUpForm}。

  <div style={signUpForm}>