styles applied to Horizontal Line via css file is not working-CodePudding

https://codesandbox.io/s/goofy-pasteur-ntcuj

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;
}

styles applied via java script is working fine but the same is not working from css for <hr /> tag.

CodePudding user response：

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

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

CodePudding user response：

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;
}

CodePudding user response：

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;
}