react-bootstrap-typeahead 默认样式

Question

I am trying to use react-bootstrap-typeahead in my project. The problem is that formatting looks pretty awful. I tried running the exact same code in an online sandbox. There it looks fine.

At first i thought that the sandbox is applying explicit styles, but that does not seem to be the case. As far as i can tell, it is using the default styling of the typeahead competent instead of applying heavy formatting. https://codesandbox.io/s/9jq9jyzmry

I suspect that something in my app is overriding the styling used by the typeahead and leading to it being improperly rendered.

I realize it is possible to apply custom formatting to the typeahead, but that feels laborious. Is there a way to force default styling on the typeahead?

For reference, here's the code:

import React, { useState } from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';

const MyPicker = () => {
  const [selected, setSelected] = useState([]);
  const handleChange = (sel) => setSelected(sel);
  return (
    <div>
      <Typeahead
        multiple
        clearButton
        id="my-typeahead"
        labelKey="fullname"
        onChange={handleChange}
        options={[
          {
            fullname: 'Apple',
          },
          {
            fullname: 'Banana',
          },
          {
            fullname: 'Peach',
          },
          {
            fullname: 'Zucchini',
          },
        ]}
        placeholder="Select options..."
        selected={selected}
      />
    </div>
  );
};

export default MyPicker;

Answer 1

Figured it based on this question: CSS not loading correctly With React-bootstrap-typeahead

The actual solution was to run npm install bootstrap on my project and then add import 'bootstrap/dist/css/bootstrap.min.css'; to my component.

Still don't quite understand why that import is not needed in the sandbox environment.