元件程式碼

import React from "react";
import { MyCardWrapper, MyCardHeader, MyCardMain } from "./styled";

interface IMyCard {
  children?: React.ReactNode;
  title?: string | React.ReactNode;
  headerRightSlot?: string | React.ReactNode;
  border?: boolean;
  borderColor?: string;
  showHeader?: boolean;
  mPadding
 
?: string;
  footer?: React.ReactNode;
}

const MyCard: React.FC<IMyCard> = (props) => {
  const headerBorder = typeof props.border === "undefined" ? true : props.border
  const isShowHeader = typeof props.showHeader === "undefined" ? true : props.showHeader
  const headerBorderColor = props.borderColor || '
 
#fbf1f1'
  return (
    <MyCardWrapper>
      <MyCardHeader border={headerBorder} show={isShowHeader} borderColor={headerBorderColor}>
        <div className="title">
          { props.title }
        </div>
        <div className="header-right">
        { props.headerRightSlot }
        
 
</div>
      </MyCardHeader>
      <MyCardMain padding={props.mPadding}>
        { props.children }
      </MyCardMain>
      { props.footer }
    </MyCardWrapper>
  )
}

export default MyCard

樣式程式碼

import styled from "styled-components";

export const MyCardWrapper = styled.div`
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 4px;
`
export const MyCardHeader = styled.div<{border: boolean, show: boolean; borderColor: string }>`
  width: 100%;
  height: 40px;
  display: ${(props) => props.show ? 'flex' : "none" };
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid ${(props) => props.border ? props.borderColor : "transparent" };
  .title {
    font-size: 16px;
    font-weight: 550;
  }
`
export const MyCardMain = styled.div<{padding: string | undefined}>`
  padding: ${(props) => props.padding || '10px'};
`

使用

import React from "react";
import MyCard from "@/components/MyCard";

const Home: React.FC = () => {
  const onMore = () => {
    alert('More')
  }
  const more = <span onClick={onMore}>More</span>
  return (
    // <SystemFrame>
    // </SystemFrame>
    <>
      <MyCard title="預設card" headerRightSlot={more}>this is Home</MyCard>
      <div style={{"height": "5px"}}></div>

      <MyCard border={false} title="tititle 沒有 border">this is Home</MyCard>
      <div style={{"height": "5px"}}></div>

      <MyCard borderColor="red" title="設定 border 顏色">this is Home</MyCard>
      <div style={{"height": "5px"}}></div>

      <MyCard showHeader={false} title="不展示 Header">不展示 Header</MyCard>
      <div style={{"height": "5px"}}></div>

      <MyCard title="有 footer" footer={<div style={{"background": "yellow"}}>我是footer</div>}>this is Home</MyCard>
    </>
  )
}

export default Home

展示效果