2

I am using Divider as a React Component but it is not getting displayed. I have tried reading the API documentation but I couldn't understand the usage of it and demos. How can this issue be resolved?

This is how it is displayed

Component:

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;
3
  • Do you see a <hr> in your DOM? I couldn't reproduce the issue in my codesandbox. Commented Dec 12, 2020 at 18:16
  • Yes. There is a <hr> tag in the DOM. <hr class="MuiDivider-root MuiDivider-middle"> Commented Dec 12, 2020 at 18:34
  • Then maybe your styles are overwritten. Is there anything in the "rules" tab of your developer tools, when seleting the <hr>? Commented Dec 13, 2020 at 7:08

1 Answer 1

8

I had the same issue and for me it was caused by flexbox I fixed it by giving the divider a width of 100% <Divider style={{width:'100%'}} />

1
  • It may be useful to also set backgroundColor as whatever specified color you desire. For mine, nothing appeared until after I specified it: <Divider style={{backgroundColor: "black", width:'100%'}} /> Commented Jul 21, 2022 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.