При работе с ReactBootstrap не видно кастомные стили

import './App.css';
import { Container, Form, Card } from 'react-bootstrap';

function App() {
  return (
    <div className="App">
      <Container my={5} mx="auto">
      <h1 className="text-muted text-center my-4">Sinoptic 2.0</h1>      
  
      <Form className="change-location my-4 text-center text-muted">
          <label for="city">Enter a location for weather information</label>
          <input type="text" name="city" className="form-control p-4"/>
      </Form>    
      <Card shadow-lg rounded >
          <img src="https://via.placeholder.com/400x300" className="time card-img-top" alt=""/>
          <div className="icon bg-light mx-auto text-center">
            <img src="" alt=""/>
          </div>
         <div className="text-muted text-uppercase text-center details"></div>
      </Card> 
      </Container>
    </div>
  );
}

export default App; 

.body {
  background: #eeedec;
  letter-spacing: 0.2em;
  font-size: 0.8em;
}
.container {
  max-width: 400px !important;
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);