Question

我想在以下反应跨度元素中实现右边距内嵌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将camelCase用于内联样式属性。像尝试> tree /F ├───FirstName │ FirstName CHK#654 │ ├───FIRSTNAME LASTNAME │ FIRSTNAME LASTNAME CHK#123 │ FIRSTNAME LASTNAME CHK#145 │ ├───Firstname Middlename Lastname │ Firstname Middlename Lastname CHK#987 │ └───Title Firstname MiddleName Lastname Title Firsname MiddleName Lastname CHK#159一样尝试marginRight: '20px'。

Answer 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">

React js CSS内联样式边距权利不起作用

2 个答案: