0
520
VistasReaccionar estilo en línea: la propiedad de estilo espera una asignación de propiedades de estilo a valores, no una cadena
Estoy tratando de establecer estilos en línea en mi aplicación React. En este caso, para un lapso:
<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>reaccionar me dice:
Violación invariable no detectada: la propiedad de
styleespera una asignación de propiedades de estilo a valores, no una cadena. Por ejemplo, style={{marginRight: spacing + 'em'}} al usar JSX. Este nodo DOM fue representado por `SentenceView
No estoy muy seguro de lo que significa.
PD: probé diferentes versiones, así que hice paddingRight: 5 así como paddingRight: 5 + 'px' así como paddingRight : 5px , ¡pero no tuve ningún éxito!
3 Respuestas
Responde la pregunta0
Use accesorios " estilo s " en lugar de estilo
<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>Aquí hay una excelente referencia de W3Schools que también le muestra cómo crear un objeto con información de estilo y consultarlo en el atributo de estilo: referencia sobre cómo aplicar estilo a React usando CSS
0
Hay algunas formas de establecer el estilo para los componentes de React.
https://facebook.github.io/react/docs/context.html
https://github.com/facebookincubator/create-react-app
usando
style={css_object}ostyle={{color: this.props.color}}usando
className="your-class-name"
reaccionar REPL
1 objeto de estilo
// <span style={styles}> const styles = { color: "red", background: "#0f0", fontSize: "32px" }; const BTN = (props) => { return ( <div> My name is <button>{props.name}</button> <hr/> I'm <span style={styles}>{props.age}</span> yeas old! </div> ); }; const infos = { name: "xgqfrms", age: 23 }; ReactDOM.render(<BTN {...infos} />, mountNode); // <span style={{color: styles.color}}> const styles = { color: "red", background: "#0f0", fontSize: "32px" }; const BTN = (props) => { return ( <div> My name is <button>{props.name}</button> <hr/> I'm <span style={{color: styles.color}}>{props.age}</span> yeas old! </div> ); }; const infos = { name: "xgqfrms", age: 23 }; ReactDOM.render(<BTN {...infos} />, mountNode); 2 nombre de clase y hoja de stylesheet.css
import './styles.css'; /* .classname-color{ color: "red"; background: "#0f0"; } */ const BTN = (props) => { return ( <div> My name is <button>{props.name}</button> <hr/> I'm <span className="classname-color">{props.age}</span> yeas old! </div> ); }; const infos = { name: "xgqfrms", age: 23 }; ReactDOM.render(<BTN {...infos} />, mountNode); .classname-color{ color: "red"; background: "#0f0"; }0
JSX y HTML son diferentes. Vea el siguiente gráfico de Udemy : 
En HTML es
<div style="background-color: red;"></div>En JSX escribes
<div style={{ backgroundColor: 'red' }}></div>El formato en línea condicional es diferente en ambos.