React中如何在classNames内定位嵌套类名？实现条件类绑定

1. 动态控制外层div的类名 #

要根据test变量动态添加test类，你可以用两种方式实现：

用classnames库（推荐，处理多类名更便捷） #

先安装依赖：

npm install classnames

然后在组件中使用：

import classNames from 'classnames';

// 假设containerCss是你定义的.Header类对应的样式名
const outerDivClasses = classNames(containerCss, {
  test: test // 当test为true时，自动添加test类
});

return (
  <div className={outerDivClasses}> 
    <Container />
  </div>
);

用ES6模板字符串（无需额外依赖） #

如果不想新增依赖，直接用字符串拼接：

const outerDivClasses = `${containerCss} ${test ? 'test' : ''}`;

return (
  <div className={outerDivClasses}> 
    <Container />
  </div>
);

2. 让Container组件匹配CSS样式 #

你的现有CSS中，.Header .test是后代选择器，只会选中.Header下带.test类的元素。要让Container组件应用这个样式，有两种方案：

方案A：给Container动态加.test类 #

直接给Container组件添加类名，当test为true时生效：

return (
  <div className={containerCss}> 
    <Container className={test ? 'test' : ''} />
  </div>
);

这样就能直接匹配你原CSS中的.Header .test规则，Container会获得width:700px的样式。

方案B：修改CSS选择器定位Container #

如果你的Container组件根元素有固定类名（比如.Container），可以修改CSS来直接定位它：

.Header { 
  width: 100%;

  /* 当Header带有test类时，选中内部的Container */
  &.test .Container {
    width: 700px;
  }

  &.test--center {
    background: red;
  }
}

这种情况下，只要外层div有.Header.test类，内部的Container就会自动应用样式，不需要给Container加额外类名。

注意点 #

• 如果你用CSS Modules，类名会被哈希处理，记得从样式文件中导入test类（比如import styles from './your-styles.module.css'，然后用styles.test代替字符串'test'）。
• 确认containerCss确实包含了.Header类，否则CSS中的所有规则都不会生效。

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