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; } Los estilos aplicados a través de java script funcionan bien, pero no funcionan de la misma manera desde css para la etiqueta <hr /> .
Tu nombre de clase es incorrecto. prueba: <hr className="line-separator" />
Tiene otro error tipográfico en su CSS, su altura debe ser 12px no 2px
tiene un error tipográfico al configurar className de la segunda hora como "separador". Debe coincidir con el className especificado en el archivo css.
Código correcto:
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; }esto debería ser una solución súper rápida:
Su nombre de clase debe coincidir con el nombre de la clase 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> ); } El valor de height aquí solo necesita cambiarse a 12px
.line-separator { background-color: #e9e9e9; height: 12px; margin: 8px; border-radius: 4px; }