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

Question

我想对下面的 react 跨度元素实现 margin-right 内联 CSS:

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;

但显示语法错误，而将 margin-right 替换为 margin 则没有错误。那么该怎么做呢？

Answer 1

React 使用驼峰命名法作为内联样式属性。尝试使用 marginRight: '20px'，就像使用 backgroundColor 一样。