水平 Material-ui 分隔线作为 React 组件不会显示。如何解决这个问题？

Question

我正在使用DividerReact 组件，但它没有显示。我尝试阅读 API 文档，但无法理解它的用法和演示。如何解决这个问题？

这是它的显示方式

成分：

import './styles.css';
import Products from '../../../Assets/Products.png';
import Divider  from '../../../../node_modules/@material-ui/core/Divider';

const ProductsSection = () => {
    return (
        <div className="ProductContainer">
            <p>INSTALLED OVER 10 LAKHS STAR RATED PUMPSETS ACROSS THE COUNTRY RESULTING IN A CUMULATIVE SAVING OF MORE THAN 9,000 MILLION UNITS OF POWER FOR THE NATION.</p>
            <img id="ProductImage" src={Products} alt="Products" />
            <p>Valves - Pumps - Pipes - IoT Drives & Controllers - Wires & Cables - Solar Systems - Motors </p>
            <Divider variant="middle"/>
            <p>C.R.I. FLUID SYSTEMS PRODUCTS CATER TO DIVERSE SEGMENTS</p>
        </div>
    )
}

export default ProductsSection;

Answer 1

我遇到了同样的问题，对我来说这是由 Flexbox 引起的，我通过将分隔线的宽度设置为 100% 来修复它 <Divider style={{width:'100%'}} />