我正在开发一个React应用程序。我正在尝试开发可重用的组件，如Bootstrap和Antdesign。
我从Card开始，我希望这个组件尽可能地可重用，因为我可以在同一个应用程序和其他应用程序中重用它，因为它将被添加到commun_lib中，这是GitLab中的一个全局存储库，供hole company通用。
我是这么做的：

• • 卡片. jsx**

import React from "react";
import {defaultStyle} from"./Card.style"

export default function Card({ title, content, style = defaultStyle }) {
  return (
    <div style={style.cn_app_card}>
      {title ? (
        <div style={style.cn_app_card_header}>
          <span style={style.cn_app_cardTitle}>{title}</span>
        </div>
      ) : (
        <></>
      )}
      <div style={style.cn_app_cardContainer}>{content}</div>
    </div>
  );
}

• • 卡片样式. js**

export var defaultStyle = {
  cn_app_card: {
    width: 500,
    height: 508,
    backgroundColor: "blue",
  },

  cn_app_card_header: {
    backgroundColor: "green",
  },

  cn_app_cardTitle: {
    color: "green",
    lineHeight: "16px",
    fontSize: "13px",
    marginLeft: "10px",
  },

  cn_app_cardContainer: {
    padding: "6px 10px 6px 10px",
    display: "flex",
    flexDirection: "column",
    boxSizing: "content-box",
    justifyContent: "center",
  }
};

• • 活动卡. jsx**

import React from "react";
import Card from "../../../../shared/components/card/Card";
import { ActivityCard_style } from "./ActivityCard.style";

export default function ActivityCard({ title, indexOfPeriod }) {
....

return <Card title={cardTitle} content={cardContent} style={ActivityCard_style}></Card>;
}

• • 活动卡片样式. js**

export var ActivityCard_style = {
  cn_app_card: {
    width: 200,
    height: 508,
  },

  cn_app_card_header: {
    backgroundColor: "green",
  },

  cn_app_cardTitle: {
    color: "green",
    marginLeft: "10px",
  },

  cn_app_cardContainer: {
    padding: "6px 10px 6px 10px",
  },
};

我原以为ActivityCard使用这个方法除了继承ActivityCard_style之外，还会继承Card的defaultStyle，但是我意识到只有在ActivityCard_style中重新声明的类和属性是有效的，这样我就应该重新定义所有的类和属性，这不是我的目标。
我应该做些什么才能用最少的代码并且没有冗余地使这个组件可重用？