javascript - 如何将 React 默认样式与 style prop 结合起来？

Question

我有以下 ui 组件:

...
import stylePropType from 'react-style-proptype';

const Heading = ({
  ...
  marginBottom,
  strong
}) => (
  <Header
    style={{
      marginBottom,
      fontWeight: strong ? 'bold' : 'normal',
    }}
  >....
  </Header>
);

Heading.defaultProps = {
  children: <div />,
  marginBottom: 4,
  strong: false,
  style: {},
};

Heading.propTypes = {
  children: PropTypes.node,
  marginBottom: PropTypes.number,
  strong: PropTypes.bool,
  style: stylePropType,
};

如何将当前样式逻辑(marginBottom 和 fontWeight)与作为 prop 传入的可选附加样式结合起来？有没有办法将两者结合或合并？

Answer 1

您可以在传入的样式上使用展开语法 (...):

  <Header
    style={{
      marginBottom,
      fontWeight: strong ? 'bold' : 'normal',
      ...this.props.style
    }}
  >....
  </Header>