如何在 JavaScript 对象中做 css

Posted 2023-03-15

【中文标题】如何在 JavaScript 对象中做 css

【英文标题】：How to do css in JavaScript Object

【发布时间】：2019-07-29 14:23:02

【问题描述】：

我是 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 属性的一些值。有人请帮助我如何完成这项任务。 谢谢

【问题讨论】：

您为什么要这样做？您已经有了 CSS，只需将样式表导入您的代码即可。您不能将 CSS 从其父样式应用到组件。

请解释“第二个属性实现了第一个属性的一些值”。我没有看到这种情况发生。

@SpeedOfRound 不正确，在 React 中你可以将元素的样式作为 javascript 对象传递。

作为道具？当然，我猜，但你不应该。

@SpeedOfRound 作为标准道具，是的。没有说这是推荐的方式，但它是可能的：p

【参考方案1】：

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

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

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

希望这会有所帮助:)

【讨论】：

如何实现第二个属性，如.left-menus .menu

完全一样，你将它隔离在另一个变量中？

能否请您为CSS的这两个属性编写代码（我对此感到困惑，因为我是初学者）谢谢

因为我们的目标是两个 css 的 Descendant Combinator

【参考方案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>
)

【讨论】：

我试过但无法实现 CSS Like (.left-menus .menu) 的两个属性

【参考方案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>

【讨论】：

其实我不想使用 CSS Inline 。我想通过 JavaScript Object 处理 css 的 Descendant Combinator 。你能帮我写一个针对css的两个属性的Javascript对象吗

@Jon 你可以在 styled-components 字符串模板中做后代组合器。据我所知，你不能用反应，javascript 样式的对象