CODEWITHSUNDEEP
cssreactjs
Jeremy Parker
Jeremy Parker

Reputation: 418

React js css inline style margin right not working

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?

Upvotes: 14

Views: 37775

Answers (2)

Odyseas Kolas
Odyseas Kolas

Reputation: 77

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

Upvotes: 4

larz
larz

Reputation: 5766

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

Upvotes: 21

Related Questions