Использование классов начальной загрузки с компонентами в стиле activjs

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

Вы можете использовать библиотеку реакции начальной загрузки в своем приложении. Проверьте приведенный ниже пример кода

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;

Ссылка Реагируйте начальной загрузки

Кроме того, вы можете определить пользовательский CSS, у меня естьопределил один класс с именем User-form и поместил код CSS в файл User.css