React js css内联样式边距不起作用

Question

I want to implement margin-right inline CSS to the below react span element:

import React, { Component } from "react";   
class NavBar extends Component {
  state = {
    totalCounters: 0,
  };      
  render() {    
    let styles = {
        margin-right: '20px',
        width: '250px',
        height: '250px',
        backgroundColor: 'yellow',
      };
    return (
      <nav className="navbar navbar-light bg-light">
        <a className="navbar-brand" href="#">
          Navbar
        </a>
        <span style={styles} className="badge badge-pill badge-secondary">
          {this.props.totalCounters}
        </span>
      </nav>
    );
  }
}
export default NavBar;

But it shows syntax error, while no error if replacing margin-right with margin . So how to do it?

Answer 1

React uses camelCase for inline style properties. Try marginRight: '20px' , just like you did with backgroundColor .

Answer 2

try this: way a)

let styles = {
        marginRight: '20px',
        width: '250px',
        height: '250px',
        backgroundColor: 'yellow',
      };


 <span style={styles} className="badge badge-pill badge-secondary">

way b)

<span style={{margin-right:"20px", width: '250px',height: '250px',background: 'yellow'}} className="badge badge-pill badge-secondary">