javascript - 如何在 JavaScript 对象中做 css

Question

我是 JavaScript 新手。我对 JavaScript Object 没有太多了解。实际上我想将 CSS 属性转换为 JavaScript 对象。我为一个工作正常的 css 属性编写代码，但我遇到了一些逻辑问题。我会给你我想在 JavaScript 对象中转换这两个属性的代码。

React 组件

<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 对象

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; 
          }

我为名为 left-menus 的 css 属性创建了对象，但是我在为第二个属性创建逻辑时遇到了问题，因为第二个属性实现了 Ist property 的一些值。有人请帮助我如何完成这项任务。谢谢

Answer 1

似乎一切都很好，除了变量声明。这是您想实现的目标吗？

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

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

希望这有帮助:)