Here is one way to write inline styling:
export default class Header extends Component {
render() {
return (
<div style={{backgroundColor:"#f4f4f4"}}>
<h3 style={{color:"purple"}}>Step one</h3>
</div>
)
}
}
If you notice, some of the kewords use camel-case. In the example above you have backgroundColor instead of background-color.
Here is another way:
export default class Header extends Component {
render() {
const style = {
color:"purple",
fontSize:"2rem",
fontFamily:"ui-sans-serif"
}
return (
<div style={style}>Step one</div>
)
}
}
In the example above, an object is used to store a collection styling to be used inline.
Hopefully this was helpful.