如何在 JavaScript 对象中做 css

Question

我是 JavaScript 新手。我没有太多与 JavaScript Object 相关的知识。实际上，我想将 CSS 属性转换为 JavaScript Object 。我为一个运行良好的 css 属性编写代码，但我面临一些逻辑问题。我会给你代码我想在 JavaScript 对象中转换这两个属性。

反应组件

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

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

Answer 1

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

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

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

希望这会有所帮助:)

Answer 2

试试https://www.styled-components.com/你可以写类似的东西，只有js：

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`

render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>
  </div>
)

Answer 3

我不能保证它会按原样工作，因为我不知道 Link 和 Icon 是什么，但它看起来像这样：

<div className="left-menus" style={{
  position: 'fixed',
  width: '200px',
  paddingRight: ' 0 !important',
  backgrounColor: '#fff',
  height: '100%',
  marginTop: '20px',
  top: '47px',
  fontSize: '12px !important',
  borderRight: '2px solid #e8e8ec'
}}>
  {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 })}
        style={{
         color: '#4a4a4a',
         width: '100%',
         display: 'block',
         cursor: 'pointer',
         textTransform: 'capitalize !important',
         padding: '15px 10px 15px 18px',
      }}
>
        <Icon name={item.icon} size="large" />
        <span>{item.name}</span>
      </Link>
    )
  })}
</div>