如何实现 React-Bootstrap？

Question

I'm trying to implement React-Bootstrap to my application and somehow it does not render.

This is the code that I have tried:

import React from 'react';

import { CardGroup, Card, Button, Container, CardImg, ListGroup, ListGroupItem, Row, Col } from 'react-bootstrap';

export class MovieView extends React.Component {
  render() {
    const { movie, onBackClick } = this.props;
    return (
      <Container>
        <Row>
          <Col>
            <CardGroup>
              <Card>
                <CardImg className="movie-view movie-poster" src={movie.ImagePath} />
                <Card.Body>
                  <Card.Title className="movie-title value">{movie.Title}</Card.Title>
                  <Card.Text className="movie-description value">{movie.Description}</Card.Text>
                </Card.Body>
                <Card.Body>
                  <ListGroup>
                    <ListGroupItem className="movie-genre">{movie.Genre.Name}</ListGroupItem>
                    <ListGroupItem className="movie-director">{movie.Director.Name}</ListGroupItem>
                  </ListGroup>
                  <Button variant="Primary" onClick={() => { onBackClick(null); }}>
                    Back
                  </Button>
                </Card.Body>
              </Card>
            </CardGroup>
          </Col>
        </Row>
      </Container>
    );
  }
}

Answer 1

If not, try adding this line in your src/index.js or App.js file

import 'bootstrap/dist/css/bootstrap.min.css';

See this documentation