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

【问题标题】：React js css inline style margin right not workingReact js css内联样式边距不起作用
【发布时间】：2019-04-01 20:11:41
【问题描述】：

我想为下面的 react span 元素实现 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 则没有错误。那么该怎么做呢？

【问题讨论】：

你也可以像margin一样使用它："0 20px 0 0",

标签： css reactjs

【解决方案1】：

React 使用 camelCase 作为内联样式属性。试试marginRight: '20px'，就像使用backgroundColor 一样。

【讨论】：

【解决方案2】：

试试这个：方式a）

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


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

方式 b)

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

【讨论】：