react-toastr安装方法及样式失效、fsevents警告问题求助

Hey there! Let's tackle your react-toastr issues one by one — I've run into similar problems before, so here's what you need to know:

Since you're using React 15, sticking with react-toastr@2.9.5 is the right call. But don't forget it depends on the core toastr library, so install both:

• Install the packages via npm:

  npm install react-toastr@2.9.5 toastr@2.1.4 --save
  

  Or with yarn:

  yarn add react-toastr@2.9.5 toastr@2.1.4
  

Your problem boils down to missing CSS and incorrect container configuration — here's how to fix it:

• Mandatory: Import toastr's CSS
  react-toastr doesn't include styling on its own; it relies on the core toastr library's CSS. Add this to your app's entry file (like index.js or App.js):

  import 'toastr/build/toastr.min.css';
  

  Alternatively, you can add it directly to your public/index.html with a link tag:

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css">
  

• Configure the ToastContainer correctly
  The ToastContainer needs a specific className to position the popup (like top-right) and enable styling. Here's a working example component:

  import React from 'react';
  import { ToastContainer } from 'react-toastr';
  
  class MyApp extends React.Component {
    showInfoMessage = () => {
      // Call the container's info method with options
      this.toastRef.info('Your message here', 'Info Title', {
        timeOut: 5000, // Auto-dismiss after 5 seconds
        closeButton: true,
        progressBar: true
      });
    };
  
    render() {
      return (
        <div>
          <button onClick={this.showInfoMessage}>Show Info Toast</button>
          {/* Add the required className for positioning/styling */}
          <ToastContainer
            ref={(ref) => (this.toastRef = ref)}
            className="toast-top-right"
          />
        </div>
      );
    }
  }
  
  export default MyApp;
  

  Critical note: Without the toast-top-right (or other valid toastr position classes like toast-bottom-right), the messages will render as plain text at the top of the page — exactly what you're seeing!
• Ensure toastr is globally available (if needed)
  Some older versions of react-toastr require toastr to be on the window object. Add this to your entry file if you still have issues:

  import toastr from 'toastr';
  window.toastr = toastr;
  

Don't worry about this one! fsevents is a macOS-only library for file system watching — it's an optional dependency, so Linux doesn't need it. The warning is harmless and won't affect your app's functionality. If you want to suppress it, add this to your package.json:

"optionalDependencies": {
  "fsevents": "*"
}

Then re-run npm install or yarn install, and the warning will go away.

Your version choice is correct (React 15 requires react-toastr 2.x), but the root problem wasn't the version — it was missing CSS and proper container configuration. Once you add the CSS and the correct className to the ToastContainer, the styled popup and auto-dismiss should work as expected.

内容的提问来源于stack exchange，提问作者messy