Блог

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

 

стили, применяемые через java script, работают нормально, но то же самое не работает с css <hr /> тегом for.

Ваше имя класса неверно. попробуйте: <hr className="line-separator" />

У вас еще одна опечатка в вашем CSS, ваша высота должна быть 12 пикселей, а не 2 пикселя

у вас есть опечатка в настройке className второго hr в качестве «разделителя». Он должен соответствовать имени класса, указанному в файле css.

Правильный код:

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

это должно быть супер быстрое решение:

Имя вашего класса должно совпадать с именем класса css .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>
  );
}
 

height Значение здесь просто нужно изменить на 12px

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