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

Question

这是在 .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'
    }
  }
}

标签： javascriptcsstypescriptcss-selectorsreact-typescript

Answer 1

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

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