是否有可能为 javascript 变量添加 nth-child？我需要将它添加到打字稿代码答案

【问题标题】：Is there a possibility to add nth-child for a javascript variable? I need to add it to typescript code是否有可能为 javascript 变量添加 nth-child？我需要将它添加到打字稿代码
【发布时间】：2021-11-21 09:14:22
【问题描述】：

这是在 .tsx 文件中。样式变量应用为styles={styles}

var styles = {
  bmBurgerBars: {
    height: '10px',
    right: '20px'
  }
  //nth child for bmBars
}

我已经尝试了下面的代码，但它没有在 UI 上实现

var styles = {
  bmBurgerBars: {
    height: '10px',
    right: '20px',
    '&:nth-child(2)': {
      width: '80%',
      left: '7px',
      background: '#111'
    }
  }
}

【问题讨论】：

这可能取决于您在 JavaScript 中用于 CSS 的库。您使用的是哪个库？
我正在使用npmjs.com/package/react-burger-menu，其中我需要为 bmBurgerBars 添加 nth-child。
所以你没有使用 CSS-in-JS 库。看起来 react-burger-menu 只是将 JS 提供的样式应用为内联样式，因此您不能使用 :nth-child 选择器。不过，您始终可以在普通 CSS 文件中添加此类规则，如 npmjs.com/package/react-burger-menu#styling 中所述
我关注var styles = { // css here } 然后<Menu styles={ styles } /> 如前所述，但未在 UI 上实现。
是的，它不能工作，因为它使用了内联样式。您必须为您的应用程序在适当的 CSS 文件中指定该规则。

标签： javascript css typescript css-selectors react-typescript

【解决方案1】：

假设您使用的是 Material UI（或类似/分叉）之类的库，您可以使用以下规范：

var styles = {
  bmBars: {
    height: '10px',
    right: '20px',
    '&:nth-child(n)': {
      color: 'red'
    }
  }
}

【讨论】：

感谢您的快速回复。此语法有效，但未在 UI 上实现。我正在使用npmjs.com/package/react-burger-menu，其中我将 nth-child 添加到 bmBurgerBars。
您能否通过编辑扩展您的问题以包含更多详细信息？
是的，我已经连同screenshort一起编辑了这个问题。