How to do css in JavaScript Object

Question

I am new to JavaScript . I don't have much knowledge related to JavaScript Object . Actully I want to convert CSS properties to JavaScript Object . I code for one css properties which is working fine but I face some logic problem . I will give you code I want to convert these two properties in JavaScript object .

React Component

<div className="left-menus">
      {menus.map(item => {
          return (
            <Link to={item.name} name={item.name} key={item.name}
              className={this.state.activeMenu === item.name ? 'menu active' : 'menu' }
              onClick={() => this.setState({ activeMenu: item.name })}
              >
              <Icon name={item.icon} size="large"/>
              <span>{item.name}</span>
            </Link>
          )
      })}
    </div>

JavaScript Object

leftMenu : {
    position: 'fixed',
    width: '200px',
    paddingRight:' 0 !important',
    backgrounColor: '#fff',
    height: '100%',
    marginTop: '20px',
    top: '47px',
    fontSize: '12px !important',
    borderRight: '2px solid #e8e8ec'
}

App.CSS

         .left-menus {
          position: fixed;
          width: 200px;
          padding-right: 0 !important;
          background-color: #fff;
          height: 100%;
          margin-top: 20px;
          top: 47px;
          font-size: 12px !important;
          border-right: 2px solid #e8e8ec; }
          .left-menus .menu {
            color: #4a4a4a;
            width: 100%;
            display: block;
            cursor: pointer;
            text-transform: capitalize !important;
            padding: 15px 10px 15px 18px; 
          }

I created object for css property which name as left-menus but I have problem to create logic for second properties because second properties implement some vales of Ist property . Someone Please help me how to do this task. Thanks

Answer 1

It seems like everything is all right, except variable declaration maybe. Is this something you would like to achieve?

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

Hope this helps :)