如何在JavaScript对象中使用css

我是JavaScript新手。我没有太多关于JavaScript对象的知识。实际上，我想将CSS属性转换为JavaScript对象。我为一个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>

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属性创建了对象，名称为

左菜单

，但我无法为第二个属性创建逻辑，因为第二个属性实现了Ist属性的一些值。有人请帮助我如何做这个任务。

---

谢谢

除了变量声明之外，似乎一切都正常。 这是你想要达到的目标吗

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

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

const divStyle={
颜色：“蓝色”，
背景图片：'url（'+imgUrl+'），
};
函数HelloWorldComponent（）{
返回你好世界！；
}

---

希望这有帮助：）

看起来一切都很好，除了变量声明。 这是你想要达到的目标吗

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

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

const divStyle={
颜色：“蓝色”，
背景图片：'url（'+imgUrl+'），
};
函数HelloWorldComponent（）{
返回你好世界！；
}

希望这有帮助：）

试试你可以写一些东西，比如，它只是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>
)

const Button=styled.a`
显示：内联块；
边界半径：3px；
填充：0.5rem 0；
保证金：0.5雷姆1雷姆；
宽度：11雷姆；
背景：透明；
颜色：白色；
边框：2倍纯白；
`
渲染(
github
)

试试看，你可以写一些东西，比如，它只是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>
)

const Button=styled.a`
显示：内联块；
边界半径：3px；
填充：0.5rem 0；
保证金：0.5雷姆1雷姆；
宽度：11雷姆；
背景：透明；
颜色：白色；
边框：2倍纯白；
`
渲染(
github
)

我不能保证它能正常工作，因为我不知道什么是

链接和
图标，但它看起来像这样：

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


{menus.map（项=>{
返回(
this.setState（{activeMenu:item.name}）
风格={{
颜色：“#4a4a4a”，
宽度：“100%”，
显示：“块”，
光标：“指针”，
textTransform:“大写！重要”，
填充：“15px 10px 15px 18px”，
}}
>
{item.name}
)
})}
我不能保证它能正常工作，因为我不知道什么是
链接和
图标，但它看起来像这样：

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


{menus.map（项=>{
返回(
this.setState（{activeMenu:item.name}）
风格={{
颜色：“#4a4a4a”，
宽度：“100%”，
显示：“块”，
光标：“指针”，
textTransform:“大写！重要”，
填充：“15px 10px 15px 18px”，
}}
>
{item.name}
)
})}
为什么要这样做？您已经有了css，只需将样式表导入到代码中即可。您不能将css应用于父样式的组件。请解释“第二个属性实现第一个属性的某些值”。我不认为会发生这种情况。@SpeedOfRound不是真的，在React中，您可以将元素的样式作为javascript对象传递。作为道具？当然，我想，但你不应该。@SpeedOfRound作为标准道具，是的。我没有说这是推荐的方式，但这是可能的：pWhy你想这样做吗？您已经有了css，只需将样式表导入到代码中即可。您不能将css应用于父样式的组件。请解释“第二个属性实现第一个属性的某些值”。我不认为会发生这种情况。@SpeedOfRound不是真的，在React中，您可以将元素的样式作为javascript对象传递。作为道具？当然，我想，但你不应该。@SpeedOfRound作为标准道具，是的。我没有说这是推荐的方法，但它是可能的：pI尝试了但无法实现CSS的两个属性，如（.left menus.menu）我尝试了但无法实现CSS的两个属性，如（.left menus.menu）如何实现第二个属性，如
.left menus.menu
，当然相同，您将它隔离在另一个变量中了吗？请您为CSS的这两个属性编写代码（我对它感到困惑，因为我是初学者）谢谢，因为我们的目标是cssHow的两个后代Combinator实现第二个属性，如
。左菜单。菜单
，当然相同，你可以在另一个变量中隔离它吗？请你为CSS的这两个属性编写代码（我对它感到困惑，因为我是初学者）谢谢，因为我们的目标是CSS的两个后代组合器。实际上，我不想使用CSS内联。我想通过JavaScript对象研究css的后代组合器。您能帮助我如何编写针对两个属性的Javascript对象吗css@Jon您可以在样式化组件字符串模板中执行子代组合。据我所知，您不能使用react、javascript样式的对象，实际上我不想使用CSS内联。我想通过JavaScript对象研究css的后代组合器。您能帮助我如何编写针对两个属性的Javascript对象吗css@Jon您可以在样式化组件字符串模板中执行子代组合。据我所知，你不能对javascript风格的对象做出反应