Question

当前代码如下

 <PageWrapper className="row">
    <div className="col-xl-4 col-md-6 nopadding">
      <List locationList={sampleLocationList}
        onTableRowClicked={this.getSelectedLocation}
        selectedLocation={this.state.selectedLocationInfo} />
    </div>
  </PageWrapper>

基本上，我正在使用引导程序类名称来获取样式。这是正确的方法吗？

如何在样式化的组件中使用引导样式？

Answer 1

您可以在应用程序中使用react bootstrap库检查以下示例代码

import React, { Component } from 'react';
import { Form, FormGroup, Col, FormControl, Button } from 'react-bootstrap';

import './User.css';

class User extends Component {

    constructor(props, context) {

    }

    render() {
        return (
            <div className="User-form">
                <Form horizontal>
                    <FormGroup controlId="formHorizontalName">
                        <Col className="control-label" sm={2}>
                            Name
                        </Col>
                        <Col sm={10}>
                            <FormControl type="text" placeholder="Name" value={this.state.userName} required />
                        </Col>
                    </FormGroup>

                    <FormGroup controlId="formHorizontalEmail">
                        <Col className="control-label" sm={2}>
                            Email
                    </Col>
                        <Col sm={10}>
                            <FormControl type="email" value={this.state.userEmail} placeholder="Email" required />
                        </Col>
                    </FormGroup>
                    <FormGroup>
                        <Col sm={12}>
                            <Button type="submit" bsStyle="primary">Submit</Button>
                        </Col>
                    </FormGroup>
                </Form>
            </div>
        );
    }
}

export default User;

引用React bootstrap

此外，您可以定义自定义CSS，我定义了一个名称为User-form的类，并将CSS代码放在User.css文件中

使用带有Reactjs样式化组件的引导类

1 个答案: