React中使用Materialize CSS SideNav组件的方法及导入配置问题求助

Hey there! Let's get that Materialize SideNav working in your Create React App without the confusion—here's a step-by-step breakdown tailored to your setup:

First, make sure you've got all required packages installed. You already ran npm install materialize-css@next, but Materialize v1.x relies on jQuery and Popper.js too. Add them with:

npm install jquery popper.js

There are two reliable ways to hook up Materialize's CSS and JS. Let's start with the most straightforward for Create React App:

Option 1: Import in src/index.js #

Add these lines at the top of your index.js file to load Materialize globally:

// Import Materialize CSS
import 'materialize-css/dist/css/materialize.min.css';

// Import jQuery and Materialize JS
import $ from 'jquery';
import 'materialize-css/dist/js/materialize.min.js';

Option 2: Link via public/index.html (Alternative) #

If you prefer CDNs over npm imports, add these tags inside the <head> of your public/index.html:

<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- jQuery & Materialize JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Now let's create a functional Sidebar component that initializes the Materialize SideNav properly. The key here is using React's useEffect to run the initialization code after the component mounts:

import React, { useEffect } from 'react';
import $ from 'jquery'; // Only needed if you used Option 1 above

const Sidebar = () => {
  useEffect(() => {
    // Initialize the SideNav when the component mounts
    const sidenav = $('.sidenav').sidenav();

    // Clean up the instance when the component unmounts to avoid memory leaks
    return () => {
      sidenav.sidenav('destroy');
    };
  }, []);

  return (
    <>
      {/* Trigger button for the SideNav */}
      <a href="#!" data-target="mobile-sidebar" className="sidenav-trigger">
        <i className="material-icons">menu</i>
      </a>

      {/* The SideNav itself */}
      <ul id="mobile-sidebar" className="sidenav">
        <li><a href="#dashboard">Dashboard</a></li>
        <li><a href="#profile">My Profile</a></li>
        <li><div className="divider"></div></li>
        <li><a href="#settings">Settings</a></li>
      </ul>
    </>
  );
};

export default Sidebar;

Important Notes:

• Make sure the data-target on the trigger matches the id of your <ul> SideNav element.
• The cleanup function in useEffect prevents duplicate SideNav instances if your component re-mounts.

Drop your Sidebar component into App.js like any other React component:

import React from 'react';
import Sidebar from './Sidebar';

function App() {
  return (
    <div className="App">
      <Sidebar />
      {/* Rest of your app content goes here */}
      <div className="container">
        <h1>Welcome to My App</h1>
      </div>
    </div>
  );
}

export default App;

If you're still running into issues, here's what to check:

• "$ is not defined": jQuery isn't properly imported. Double-check that you added import $ from 'jquery'; in index.js or your Sidebar component.
• SideNav won't open: Verify the data-target and <ul> ID match exactly, and that you ran the .sidenav() initialization code.
• Broken styling: Ensure the Materialize CSS is imported before any custom CSS in your project to avoid conflicts.

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