Your className is wrong. try: <hr className="line-separator" />

You have another Typo in your CSS, your height should be 12px not 2px

you have a typo in setting className of the second hr as "separator". It should match the className specified in the css file.

Correct code:

import "./styles.css";

export default function App() {
  const separator = {
    backgroundColor: "#E9E9E9",
    height: "12px",
    margin: "8px",
    borderRadius: "4px"
  };

  return (
    <div className="App">
      <hr style={separator} />
      <hr className="line-separator" />
    </div>
  );
}
.line-separator {
  background-color: #e9e9e9;
  height: 2px;
  margin: 8px;
  border-radius: 4px;
}

this should be a super quick fix:

Your className needs to match the name of the css class .line-separator

import "./styles.css";

export default function App() {
  const separator = {
    backgroundColor: "#E9E9E9",
    height: "12px",
    margin: "8px",
    borderRadius: "4px"
  };

  return (
    <div className="App">
      <hr style={separator} />
      <hr className="line-separator" />
    </div>
  );
}

The height value here just needs changing to 12px

.line-separator {
  background-color: #e9e9e9;
  height: 12px;
  margin: 8px;
  border-radius: 4px;
}