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
style
prop 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!
Use " style
s
" 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
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}
or style={{color: this.props.color}}
using className="your-class-name"
// <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);
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"; }
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.
This is the way how you can define and use inline style with react.
/**
* Style definitions.
*/
const STYLE = {
infoColor: {
color: 'green'
},
warningColor: {
color: 'orange'
},
errorColor: {
color: 'red'
}
};
/**
* Component
*/
class Welcome extends React.Component {
/**
* Rendering into the DOM.
*/
render() {
return (
<div>
<h2 style={STYLE.infoColor}>Welcome!</h2>
)
}
}
when we use inline styling in react we should always use style={{styleproperties}}
Error:
<input style="margin:0 15px 0 0"/>
Solution:
<input style={{margin:"0 15px 0 0"}}/>
不要将 {{}} 括在双引号或字符串中
Below answer is more informative:
https://stackoverflow.com/a/44733640/984471
Want to share my experience in production project
- I have used the 1st option, copy the style into CSS, and give className in reactjs - this is safe if you have css already with you.
- Not used the 2nd option, because we need to do camel casing like background-color to backgroundColor, where we might go wrong -- so its risky if you have the css already with you.
JSX 和 html 是不同的东西,我们有一些不同的语法来在 jsx 中添加内联 css 我建议阅读整个文档以更好地理解https://www.w3schools.com/react/react_css.asp
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.