目录

前言

 导语

代码部分

 父组件引入

代码部分

运行结果

总结

前言

我是歌谣 我有个兄弟 巅峰的时候排名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>

运行结果

总结

每天一行代码 成就最好的自己 可以动态传入参数控制表头的颜色 还有文字的样式