手写一个classname

packages/perfect-design/src/utils/classNames.ts

type classNamesArg = Array<any>

export default function (...args: classNamesArg): string {
  const classNames: any = []
  args.forEach((item) => {
   item !== undefined && item !== '' && classNames.push(item)
  })

  return [...new Set(classNames)].join(' ')
}

react-transition-group 动画库

"react-transition-group": "^4.4.5"

import { CSSTransition } from 'react-transition-group'

<CSSTransition
  in={visible}
  timeout={200}
  appear
  mountOnEnter
  classNames="fadeContent"
  unmountOnExit
  onEnter={(e: HTMLDivElement) => {
   e.style.display = 'flex'
  }}
  onExited={(e: HTMLDivElement) => {
   e.style.display = 'none'
  }}
>


</CSSTransition>    

GlobalConfig 主题

packages/perfect-design/src/GlobalConfig/index.tsx

import React, { createContext } from 'react'
import { GlobalConfigProps } from './interface'

export const globalCtx = createContext<GlobalConfigProps>(
  {} as GlobalConfigProps
) // 顶层通信装置

const GlobalConfig = (props: GlobalConfigProps) => {
  const { children } = props

  return <globalCtx.Provider value={props}>{children}</globalCtx.Provider>
}

export default GlobalConfig

packages/perfect-design/src/GlobalConfig/interface.ts

import { ReactNode } from 'react'

interface GlobalConfigProps {
  children?: ReactNode
  /**
   * @description 主题颜色
   * @default #325DFF
   */
  globalColor?: string
  /**
   * @description 全局组件类名前缀
   * @default prefect
   */
  prefixCls?: any
  /**
   * @description 深色模式
   * @default false
   */
  darkTheme?: boolean
}

export type { GlobalConfigProps }

styled-components用法

packages/perfect-design/src/components/Alert/style/index.tsx

从一个对象中排除某几个属性 omit

function omit(obj, fields) {
  // eslint-disable-next-line prefer-object-spread
  const shallowCopy = Object.assign({}, obj);
  for (let i = 0; i < fields.length; i += 1) {
    const key = fields[i];
    delete shallowCopy[key];
  }
  return shallowCopy;
}

先是对原始对象使用Object.assign进行一个浅拷贝，获得一个浅拷贝的对象；

然后对传递过来的fields键名列表进行一个遍历，删除浅拷贝对象里面对应的键名属性；

最后返回浅拷贝对象；