React父子组件样式传递：能否将内联styleObj移至SCSS文件？

当然可以！这其实是个非常棒的实践——把样式逻辑从JS代码里抽离到SCSS文件，让组件的职责划分更清晰。下面给你几种可行的方案，你可以根据项目需求和场景来选择：

方案一：使用CSS变量（推荐，简单灵活） #

CSS变量可以让你在SCSS里定义样式值，然后在JS或子组件的样式中复用，完美适配需要通过props传递动态样式的场景。

1. 在a-style.scss中定义CSS变量
   你可以选择全局生效（用:root），或者仅在组件A的作用域内生效（更推荐，避免全局污染）：

   // a-style.scss
   // 仅在组件A容器内生效
   .component-a-container {
     --component-b-bg: #F9F...;
     // 其他需要的样式变量都可以在这里定义
   }
   

2. 在组件A中传递样式（两种方式）

   • 方式一：继续通过props传递style对象（适合需要动态修改的场景）

     import "./a-style.scss";
     import B from "./B.js";
     
     class A extends Component {
       render() {
         // 从CSS变量中读取值，构建styleObj
         const containerEl = document.querySelector('.component-a-container');
         const styleObj = {
           backgroundColor: getComputedStyle(containerEl)
             .getPropertyValue('--component-b-bg').trim()
         };
         return (
           <div className="component-a-container">
             <B style={styleObj} />
           </div>
         );
       }
     }
     

   • 方式二：直接给子组件B指定类名（更简洁，适合样式固定的场景）
     在a-style.scss中给B的类名绑定变量：

     .component-a-container .component-b-custom {
       background-color: var(--component-b-bg);
     }
     

     然后在组件A中传递类名：

     <div className="component-a-container">
       <B className="component-b-custom" />
     </div>
     

方案二：使用CSS Modules（适合需要模块化样式的项目） #

如果你的项目支持CSS Modules（比如Create React App默认支持），可以通过导出SCSS变量的方式，在JS中直接引用样式值。

1. 修改SCSS文件为模块格式
   把a-style.scss重命名为a-style.module.scss，然后在其中定义变量并导出：

   // a-style.module.scss
   $component-b-bg: #F9F...;
   
   // 导出变量供JS使用
   :export {
     componentBBg: $component-b-bg;
   }
   

2. 在组件A中导入并使用

   import styles from "./a-style.module.scss";
   import B from "./B.js";
   
   class A extends Component {
     render() {
       const styleObj = {
         backgroundColor: styles.componentBBg
       };
       return <B style={styleObj} />;
     }
   }
   

方案三：纯类名绑定（最简洁，适合静态样式） #

如果样式不需要动态修改，完全可以跳过props传递style的方式，直接通过父组件的类名作用域给子组件设置样式：

1. 在a-style.scss中编写样式

   .component-a {
     .component-b {
       background-color: #F9F...;
       // 其他样式也可以在这里定义
     }
   }
   

2. 在组件A中给元素添加类名

   import "./a-style.scss";
   import B from "./B.js";
   
   class A extends Component {
     render() {
       return (
         <div className="component-a">
           <B className="component-b" />
         </div>
       );
     }
   }
   

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