0
178
ViewsEl estilo en línea de reaccionar jsx no se representa cuando se completa desde una variable
Agregué un elemento de estilo en línea a una etiqueta div en un componente de reacción junto con un elemento className. La propiedad className se representa pero el estilo no se muestra. Estoy configurando desde una variable de objeto. Sin embargo, si configuro el elemento de estilo directamente usando llaves dobles, funciona, simplemente no funciona desde una variable.
Aquí hay una imagen del valor del objeto que estoy usando para establecer el elemento de estilo.
Esto muestra dónde se debe configurar el elemento de estilo a medida que se procesa el componente, el objeto styleElement tiene un valor establecido en este punto
Esto muestra la representación posterior del componente y el elemento de estilo no está presente
¿Qué evitaría que el elemento de estilo se renderice aunque se complete a partir de un objeto que contenga propiedades CSS?
6 answers
Answer question0
usa ES6 para esto.
background: `url(${imageUrl}) no-repeat`0
Agregue " alrededor de la imageURL
{ background: "url(\"" + imageUrl + "\") no-repeat ..."}0
Parece que su problema radica en la parte !important . React no admite el uso de !important en el objeto de estilo. Si puede deshacerse de esa parte !important , sería lo mejor, pero si no puede, aquí hay una solución alternativa (tomada de esta respuesta SO ):
<div ref={(node) => { if (node) { node.style.setProperty('background', `url(${imageUrl}) no-repeat 50% 40%`, 'important'); } }} />0
Creo que !important es el principal culpable aquí. Simplemente elimínelo y todo debería mostrarse con la variable dentro.
El CSS en línea, como regla general, anulará cualquier CSS en su hoja de estilo asumiendo el mismo nivel de especificidad.
0
la sintaxis de la imagen de fondo es
background-image: url("img_tree.gif"); Le falta el " entre el nombre del archivo. cambie a
{ background: 'url("' + imageUrl + '") no-repeat 50% 40% !important' } la otra cosa que quizás desee verificar es asegurarse de que img_tree.gif sea realmente la ruta correcta, por lo general, debería ser una ruta relativa o una ruta absoluta, algo como ./img_tree.gif o http://example.com/img_tree.gif
también asegúrese de tener un tamaño de fondo
background-size: cover0
Una regla sobre !important
- Cualquier valor en la propiedad de estilo de un elemento tiene prioridad sobre cualquier cosa heredada por una hoja de estilo (incluso si la regla de la hoja de estilo usa la anotación !important). Por lo tanto, no tiene que usar
!importantdentro del estilo en línea
Creo que es posible que deba importar la ruta en jsx
// require also works background:`url(${import("./images/your_image")}) no-repeat 50% 40%`Si no funciona, intente esto:
style={{ backgroundImage: `url(${require('./images/your_image')})`, backgroundRepeat: 'no-repeat', }}