React中如何合并组件内置样式与外部props传入的样式？

在React里没法像React Native那样直接把样式对象放进数组，需要通过合并对象的方式实现，外部传入的样式会覆盖内部同名属性，下面是两种常用方法：

方法1：对象展开运算符（最推荐） #

用...把内部样式和外部传入的样式展开合并，把外部样式放在后面，确保它的优先级更高：

export interface MenuItemProps {
  containerStyle?: React.CSSProperties;
  title?: string;
  selected?: boolean;
  onClick?: () => void;
}

export const MenuItem: React.FC<MenuItemProps> = (props) => {
  const { title, selected, onClick, containerStyle } = props;

  const myStyle = {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
    marginBottom: 10,
  };

  return (
    <div
      style={{ ...myStyle, ...containerStyle }}
      onClick={onClick}
    >
      {title}
    </div>
  );
};

方法2：Object.assign #

和展开运算符效果一致，把内部样式作为基础对象，外部样式作为后续参数传入，后者会覆盖前者的同名属性：

// 替换style行的写法
style={Object.assign({}, myStyle, containerStyle)}

注意事项 #

• 如果外部传入的containerStyle是undefined，两种方法都不会出错，因为展开或合并undefined不会影响原有样式。
• React的CSSProperties是扁平结构，不需要处理嵌套样式的深层合并，上面的方法足够覆盖绝大多数场景。

内容的提问来源于stack exchange，提问作者storm-83