使用& > div选择器为组件子div设置样式失效，求解决方案

问题根源 #

React内置的内联style属性仅支持键值对形式的单个元素样式，不支持CSS选择器（比如& > div）和嵌套语法，所以你直接在styles对象里写选择器作为键的写法完全不生效。

可行方案（无需给每个子div加style） #

方案1：使用CSS Modules（推荐类组件场景） #

这是React项目中最常用的模块化样式方案，支持标准CSS或Sass/Scss的嵌套语法：

1. 创建模块化CSS文件（比如MyComponent.module.css）：

/* 普通CSS写法 */
.gridContainer > div {
  background-color: blue;
}

/* 如果用Sass/Scss，可使用嵌套语法 */
/* .gridContainer {
  & > div {
    background-color: blue;
  }
} */

2. 在类组件中导入并使用该样式：

import React from 'react';
import styles from './MyComponent.module.css';

class MyComponent extends React.Component {
  render() {
    return (
      {/* 给容器添加模块化类名 */}
      <div className={styles.gridContainer}>
        <div>子元素1</div>
        <div>子元素2</div>
        <div>子元素3</div>
      </div>
    );
  }
}

export default MyComponent;

方案2：使用styled-components #

如果项目已集成styled-components，可以直接创建带嵌套样式的容器组件：

import React from 'react';
import styled from 'styled-components';

// 创建带样式的容器组件，支持嵌套选择器
const GridContainer = styled.div`
  & > div {
    background-color: blue;
  }
`;

class MyComponent extends React.Component {
  render() {
    return (
      <GridContainer>
        <div>子元素1</div>
        <div>子元素2</div>
        <div>子元素3</div>
      </GridContainer>
    );
  }
}

export default MyComponent;

注意事项 #

• 不要混淆React内联style对象和CSS预处理器/模块化方案的语法，前者只能写单个元素的样式属性，后者才支持选择器和嵌套。
• 如果项目未配置CSS Modules或styled-components，优先选择CSS Modules，无需额外依赖（多数React脚手架默认支持）。

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