前言

我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷

导语

今天是继续做开源项目的一天今天是准备封装一个带个标题栏的一个组件还是日常的一个过程我们先上个代码

代码部分

import React, { Component } from 'react';
import { Card } from 'antd';
import styles from './index.scss';

export class StepCard extends Component {
  render() {
    const {
      title,
      children,
      rightContent,
      hasBorder,
      titlebackgroundColor,
      titleColor,
      style,
      cardStyle,
      titleBorder,
      ...restProps
    } = this.props;
    return (
      <div style={style} id={this.props.id}>
        <div
          style={{
            backgroundColor: `${titlebackgroundColor ?
 titlebackgroundColor : '#fff'}`,
            border: titleBorder ? titleBorder : 'none',
          }}
          className={styles.titleContent}
        >
          <div
            className={styles.titleBackground}
            style={{ color: `${titleColor ? titleColor : '#1890ff'}` }}
          >
            <div className={styles.leftFlag} />
            {title || '--'}
          </div>
          <span>{rightContent || ''}</span>
        </div>
        {children && <Card bordered={hasBorder}>{children}</Card>}
      </div>
    );
  }
}

export default StepCard

父组件引入

import  StepCard from './Common/StepCard/index';

代码部分

 {/* title表示标题 titlebackgroundColor表示背景色 titleBackground文字颜色 */}
           <StepCard title="状态" titlebackgroundColor={'red'} 
titleBackground={'blue'}></StepCard>