无法在 Materialize.css 中使用网格系统进行反应

Question

我正在尝试在我的 React 组件中使用 Materialize.css 网格系统，但这些卡片并没有彼此相邻排列，而是堆叠在一起。这是我的两个组件的代码。

组件Pillows.js

import React, {Fragment, useContext, useEffect} from 'react';
import SinglePillow from "./SinglePillow";

import {GlobalContext} from "../../context/GlobalState";

const Pillows = () => {
    const {pillows, getPillows} = useContext(GlobalContext);

    useEffect(() => {
        getPillows();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <Fragment>
            <div className="pillows">
                {pillows.map(pillow => (
                    <SinglePillow pillow={pillow}/>
                ))}
            </div>
        </Fragment>
    );
};

export default Pillows;

组件SinglePillow.js

import React from 'react';
//import pillow from "../pages/img/pillow1.jpg";

const SinglePillow = ({pillow}) => {
    return (
        <section id="popular" className="section section-popular scrollspy">
            <div className="container">
                <div className="row">
                    <div className="col s12 m4">
                        <div className="card">
                            <div className="card-image">
                                <img src={pillow.imageUrl} alt=""/>
                                <span className="card-title">Custom pillow</span>
                            </div>
                            <div className="card-content">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur dolor
                                    maiores obcaecati, sit tenetur?
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default SinglePillow;

请协助

Answer 1

容器和行 class 不应在 SinglePillow 中以并排创建 SinglePillows。由于有多个 SinglePillows，它们会创建多行并相互堆叠。您可以将容器和行 class 移动到父组件。

无法在 Materialize.css 中使用网格系统进行反应

Cannot use the grid system in Materialize.css in react

materialize

reactjs