我想在以下反应跨度元素中实现右边距内嵌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
则没有错误。那怎么办呢?
答案 0 :(得分:4)
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'
。
答案 1 :(得分:0)
尝试: 方式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">