0
177
ViewsReact inline style - style prop expects a mapping from style properties to values, not a string
I am trying to set inline styles in my React application. In this case, for a span:
<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>
React tells me:
Uncaught Invariant Violation: The
styleprop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by `SentenceView
I am not quite sure what it means.
PS: I have tried different versions, so I did paddingRight: 5 as well as paddingRight: 5 + 'px' as well as paddingRight : 5px, but I didn't have any success!
3 answers
Answer question0
Use "styles" prop instead of style
<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>
Here is a great reference from W3Schools which also shows you how to create an object with styling information, and refer to it in the style attribute: reference for how to style React using CSS
0
There some ways to set style for React Components.
https://facebook.github.io/react/docs/context.html
https://github.com/facebookincubator/create-react-app
using
style={css_object}orstyle={{color: this.props.color}}using
className="your-class-name"
React REPL
1 style Object
// <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 className & 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 and HTML are different. See the graphic below from Udemy:
In HTML it is
<div style="background-color: red;"></div>
In JSX you write
<div style={{ backgroundColor: 'red' }}></div>
Conditional inline formatting are different in both.