Reactjs 样式化系统中的标题组件

如何使用样式化系统和样式化组件创建通用标题组件

下面的工作，但我所有的标题使用h1标签

import css from "@styled-system/css"
import styled from "styled-components"
import { color, ColorProps, textAlign, TextAlignProps, variant } from "styled-system"

type Props = {
  level: 1 | 2 | 3 | 4 | 5 | 6
} & TextAlignProps &
  ColorProps

const Css = css({
  fontFamily: "heading",
  fontWeight: "heading",
})

const Variant = variant({
  prop: "level",
  variants: {
    1: {
      fontSize: 7,
      lineHeight: 7,
    },
    2: {
      fontSize: 6,
      lineHeight: 6,
    },
    3: {
      fontSize: 5,
      lineHeight: 5,
    },
    4: {
      fontSize: 4,
      lineHeight: 4,
    },
    5: {
      fontSize: 3,
      lineHeight: 3,
    },
    6: {
      fontSize: 2,
      lineHeight: 2,
    },
  },
})

const Heading = styled("h1")<Props>(Css, Variant, textAlign, color)

export default Heading

从“@styled system/css”导入css
从“样式化组件”导入样式化
从“样式化系统”导入{color，ColorProps，textAlign，TEXTALIGNSPROPS，variant}
类型道具={
级别：1 | 2 | 3 | 4 | 5 | 6
}&TextAlignProps&
彩色道具
常量Css=Css({
fontFamily：“标题”，
fontWeight:“标题”，
})
常量变量=变量({
道具：“关卡”，
变体：{
1: {
字体大小：7，
线高：7，
},
2: {
字体大小：6，
线高：6，
},
3: {
字体大小：5，
线高：5，
},
4: {
字体大小：4，
线高：4，
},
5: {
字体大小：3，
线高：3，
},
6: {
字体大小：2，
线高：2，
},
},
})
const Heading=styled（“h1”）（Css、变量、文本对齐、颜色）
导出默认标题

我尝试创建一个HeadingBase组件，如：

type Props = {
  level: 1 | 2 | 3 | 4 | 5 | 6,
  as: string | undefined
} & TextAlignProps &
  ColorProps

const HeadingBase = ({ level, as: Component = `h${level}`, ...props }: Props) => <Component {...props} />

const Heading = styled(HeadingBase)<Props>(Css, Variant, textAlign, color)

类型道具={
级别：1 | 2 | 3 | 4 | 5 | 6，
as:字符串|未定义
}&TextAlignProps&
彩色道具
const HeadingBase=（{level，as:Component=`h${level}`，…props}:props）=>
const Heading=styled（HeadingBase）（Css、变量、文本对齐、颜色）

---

但是我在

上遇到了一个错误，因为它没有用于TextAlignProps和ColorProps的API。

也许您可以利用

as

，以便在提供变量时，

as

键自动更改为变量字符串。这可能更容易用代码来解释，看一看

const headingVariant = ({ fontSize }) => {
  let variantConfig = {
    h1: {
      fontSize: [7, 8], //28px 32px
    },
    h2: {
      fontSize: [6, 7], //24px 28px
    },
    h3: {
      fontSize: ['22px', 6], //22px 24px
    },
    h4: {
      fontSize: 5, //20px
    },
    h5: {
      fontSize: 4, //18px
    },
  };

  if (fontSize) {
    variantConfig = Object.keys(variantConfig).reduce((acc, currKey) => {
      acc[currKey] = {
        ...variantConfig[currKey],
        fontSize,
      };
      return acc;
    }, {});
  }
  return variant({
    prop: 'variant',
    variants: variantConfig,
  });
};

const Heading = styled(BaseText).attrs(
  ({ variant: hybridVariant, as: asOverride }) => ({
    as: asOverride ?? hybridVariant,
  })
)(
  ({ isBold, color }) =>
    css({
      fontFamily: `sofia-pro, Helvetica, Arial`,
      lineHeight: '130%',
      color: color || 'text',
      fontWeight: isBold ? 1 : 0,
      fontStyle: 'normal',
    }),
  headingVariant
);

Heading.propTypes = {
  isBold: PropTypes.bool,
  variant: PropTypes.string,
};

Heading.defaultProps = {
  isBold: true,
  variant: 'h2',
};

export default Heading;