CSS only applying to one element and dev tools not showing the rest of the styles

Issue

I have a weird CSS problem.

My react element looks like this:

   <div className="modal">
      <div className="modal-content">
        <div className="modal-header">
          <h4 className="modal-title">Modal title</h4>
        </div>
        <div className="modal-body">This is modal content</div>
        <div className="modal-footer">
          <button onClick={props.onClose} className="button">
            Close
          </button>
        </div>
      </div>
    </div>

My styling looks like this:

.modal-content {
  width: 15rem;
  background: red;
};

.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
};


.modal-header, .modal-footer {
  padding: 10px;
};

.modal-title {
  margin: 0;
};

.modal-body {
  padding: 10px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

But in dev tools it only applies styling of the first class in the css stylesheet and nothing else, it doesn't even show up in devtools.[Link][1]

Any advice?

Solution

As explained here, the issue is that you have a semicolon outside of the brackets, that's invalid syntax and doesn't pick up any of the rules beneath it.

Instead of

.modal-content {
  width: 15rem;
  background: red;
};

You should have

.modal-content {
  width: 15rem;
  background: red;
}

Change all the rules to reflect that, and you should be good to go!

Answered By - Nathan