Html Question posted in
Some basic documentation can be found here.

Html – Why won't CSS for hr tag show up in React code?

I am using this code to create a border in my React code:

<hr className="borderLine" />

however, when styling it with CSS, I am use this code:

.divider {
    margin: 2rem;
    width: 100%;
    color: white;
    border: 1px solid white; /* Adjust the color and style as needed */
  }

This issue is that when I use .borderLine for the CSS, it doesn’t show up. The hr line only shows up on the page using .divider, but no class is named .divider.

I have tried renaming all the className‘s, but it did not make a difference, it just didn’t show up unless I used .divider. I even cleared my cache.

Tags:

2

Answers


  1. 0
    1. Change your CSS ClassName .divider To .borderLine
    2. Make Sure You Are Imported CSS correctly.
      For Ex. import "./style.css";
    Login or Signup to reply.
  2. 0

    it looks like the issue is you’re CSS is trying to style a class name ‘divider’ but the hr className is ‘borderLine’ so try changing the CSS classname identifier to ‘borderLine’.

    Copy and paste this to replace the .divider css and it should work:

    .borderLine {
    margin: 2rem;
    width: 100%;
    color: white;
    border: 1px solid white; /* Adjust the color and style as needed */
  }

    also, make sure you are importing the css file wherever you are trying to use it. (ex import './styles.css')

    (OR you could also change the class name in your HTML to accomplish the same thing like the snippet below, but only pick one because the names should correspond to each other)

    <hr className='divider' />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search