React中如何将父组件样式传递给子组件？

先给你提个醒，你写的Child组件里有个小坑：render方法里又渲染了<Child />，这会触发无限递归，得先把这个问题修正过来。接下来咱们聊聊几种实用的父组件向子组件传递样式的方法：

方法一：直接传递class类名，子组件组合使用 #

这是最直观简单的方式，父组件把自己的class类名通过props传给子组件，子组件可以把它和自身的样式类名组合起来应用到目标元素上。

修正后的Parent.js #

const styles = theme => ({ 
  field: { 
    flexGrow: 1, 
    position: 'relative', 
    zIndex: 1, 
  }, 
}); 

class Parent extends React.Component { 
  render(){ 
    const {classes } = this.props;
    return ( 
      <div> 
        <Child className={classes.field} /> 
      </div> 
    ) 
  } 
} 

修正后的Child.js #

const styles = theme => ({ 
  container: { 
    flexGrow: 1, 
    position: 'relative', 
    zIndex: 2, 
  }, 
}); 

class Child extends React.Component { 
  render(){ 
    const {classes, className} = this.props;
    // 组合子组件自身样式和父组件传递的样式
    const combinedClass = `${classes.container} ${className}`;
    return ( 
      <div className={combinedClass} /> 
    ) 
  } 
} 

如果担心类名冲突或者需要处理空值的情况，推荐使用classnames库（需要通过npm安装），用法更简洁：

import classnames from 'classnames';

// 在render中
const combinedClass = classnames(classes.container, className);

它会自动忽略undefined、null这类无效值，避免生成无效的class字符串。

方法二：传递样式对象，子组件动态合并 #

如果需要更灵活的样式控制，父组件可以直接传递样式对象给子组件，子组件将其与自身样式合并后应用。

修改后的Parent.js #

class Parent extends React.Component { 
  render(){ 
    const {theme} = this.props;
    // 获取父组件的field样式对象（未经过withStyles处理的原始样式）
    const parentFieldStyles = styles(theme).field;
    return ( 
      <div> 
        <Child parentStyles={parentFieldStyles} /> 
      </div> 
    ) 
  } 
} 

修改后的Child.js #

class Child extends React.Component { 
  render(){ 
    const {classes, parentStyles} = this.props;
    // 合并样式对象，后面的属性会覆盖前面的（如果有重复）
    const combinedStyles = {...classes.container, ...parentStyles};
    return ( 
      <div style={combinedStyles} /> 
    ) 
  } 
} 

这种方式适合需要动态调整样式的场景，比如根据父组件的状态传递不同的样式对象。

方法三：复用父组件的样式定义 #

如果子组件需要直接复用父组件的样式规则，可以在子组件中导入父组件的styles函数，合并到自身的样式定义里。

修改后的Child.js #

// 导入父组件的styles函数
import {styles as parentStyles} from './Parent';

const styles = theme => ({ 
  container: { 
    flexGrow: 1, 
    position: 'relative', 
    zIndex: 2, 
  },
  // 合并父组件的所有样式定义
  ...parentStyles(theme)
}); 

class Child extends React.Component { 
  render(){ 
    const {classes} = this.props;
    // 直接使用合并后的field类名
    return ( 
      <div className={`${classes.container} ${classes.field}`} /> 
    ) 
  } 
} 

这种方式适合子组件需要长期复用父组件样式的场景，不过要注意样式优先级：如果两个类定义了相同的CSS属性，后加载的类或者更具体的选择器会生效。

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