如何在TSX文件的JavaScript样式变量中使用:nth-child选择器？

你遇到的问题核心是：React组件的内联style属性不支持嵌套选择器、伪类/伪元素（比如:nth-child）。内联样式只能直接定义当前元素的CSS属性，无法选择子元素或兄弟元素，所以你写的&:nth-child(2)这种嵌套语法不会被解析生效。

下面分两种常见的场景给出TypeScript下的实现方案：

方案1：使用CSS-in-JS库（推荐，比如styled-components） #

如果你用的是styled-components这类CSS-in-JS库，它支持嵌套选择器语法，而且对TypeScript有很好的支持。

步骤： #

1. 先安装依赖及类型定义：

npm install styled-components
npm install @types/styled-components --save-dev

2. 在TSX中编写样式组件：

import styled from 'styled-components';

// 定义带有:nth-child样式的汉堡按钮组件
const StyledBurgerButton = styled.button`
  .bmBurgerBars {
    height: 10px;
    right: 20px;

    &:nth-child(2) {
      width: 80%;
      left: 7px;
      background: #111;
    }
  }
`;

// 在组件中使用
function BurgerMenu() {
  return (
    <StyledBurgerButton>
      {/* 这里是你的汉堡条元素，带有bmBurgerBars类名 */}
      <span className="bmBurgerBars"></span>
      <span className="bmBurgerBars"></span>
      <span className="bmBurgerBars"></span>
    </StyledBurgerButton>
  );
}

如果你更习惯对象式的样式写法，可以用Emotion库的对象语法：

import { css } from '@emotion/react';

const burgerStyles = css({
  '.bmBurgerBars': {
    height: '10px',
    right: '20px',
    '&:nth-child(2)': {
      width: '80%',
      left: '7px',
      background: '#111'
    }
  }
});

// 使用时
function BurgerMenu() {
  return (
    <div css={burgerStyles}>
      <span className="bmBurgerBars"></span>
      <span className="bmBurgerBars"></span>
      <span className="bmBurgerBars"></span>
    </div>
  );
}

方案2：使用CSS Modules #

如果更倾向于传统的CSS文件写法，可以用CSS Modules来避免样式污染，同时TypeScript也能很好地支持。

步骤： #

1. 创建一个.module.css文件（比如BurgerMenu.module.css）：

.bmBurgerBars {
  height: 10px;
  right: 20px;
}

.bmBurgerBars:nth-child(2) {
  width: 80%;
  left: 7px;
  background: #111;
}

2. 在TSX中导入并使用：

import styles from './BurgerMenu.module.css';

function BurgerMenu() {
  return (
    <div>
      <span className={styles.bmBurgerBars}></span>
      <span className={styles.bmBurgerBars}></span>
      <span className={styles.bmBurgerBars}></span>
    </div>
  );
}

为什么你的原始写法不生效？ #

你之前写的对象式样式，其实是React内联style属性的写法，这种写法有几个关键限制：

• 只能定义当前元素的CSS属性，不能使用任何选择器（包括伪类、后代选择器等）
• 属性名必须是驼峰式（比如backgroundColor而非background-color）
• 不支持&这种嵌套语法

所以如果想使用:nth-child这类选择器，必须借助CSS-in-JS库或者CSS Modules，而不是直接用React的内联style属性。

内容的提问来源于stack exchange，提问作者Soundarya