如何使用 React、TypeScript 和样式组件制作文本组件

女爷i 2023-10-13 09:25 40阅读 0赞

文本可能是任何应用程序中最常用的组件。今天我想分享一个可靠的可重用文本组件，它在我的前端开发工作中非常有用，也应该为您节省时间。

### 文本组件 ###

该Text组件只是一个样式化的段落，我们还可以通过传递属性将其转换为任何其他元素，例如 div、span 或标题as。此外，我们可以以任何我们喜欢的方式修改它，使用属性styles或用函数包装它styled。由于这种灵活性，它可以作为其他组件的构建块。

import styled, {
         DefaultTheme, css } from "styled-components"
    
    const getTextColorRecord = ({
          colors }: DefaultTheme) =>
      ({
        
        regular: colors.text,
        supporting: colors.textSupporting,
        supporting2: colors.textSupporting2,
        supporting3: colors.textSupporting3,
    
        primary: colors.primary,
        attention: colors.attention,
        alert: colors.alert,
        success: colors.success,
        reversed: colors.background,
        contrast: colors.contrast,
      } as const)
    
    type TextWeight = "regular" | "semibold" | "bold"
    const fontWeight: Record<TextWeight, number> = {
        
      regular: 400,
      semibold: 500,
      bold: 600,
    }
    
    type TextHeight = "small" | "regular" | "large"
    const lineHeight: Record<TextHeight, number> = {
        
      small: 1,
      regular: 1.2,
      large: 1.5,
    }
    
    export type TextColor = keyof ReturnType<typeof getTextColorRecord>
    
    export interface TextProps {
        
      color?: TextColor
      weight?: TextWeight
      size?: number
      height?: TextHeight
      centered?: boolean
      cropped?: boolean
      nowrap?: boolean
    }
    
    export const oneRemInPx = 16
    
    const getFontSize = (sizeInPx: number) => {
        
      const sizeInRem = sizeInPx / oneRemInPx
    
      return `${
          sizeInRem}rem`
    }
    
    export const Text = styled.p<TextProps>`
      margin: 0;
      padding: 0;
      overflow-wrap: break-word;
    
      ${
          ({
            color, theme }) =>
        color &&
        css`
          color: ${ getTextColorRecord(theme)[color].toCssValue()};
        `}
      ${
          ({
            weight }) =>
        weight &&
        css`
          font-weight: ${ fontWeight[weight]};
        `}
      ${
          ({
            height }) =>
        height &&
        css`
          line-height: ${ lineHeight[height]};
        `}
      ${
          ({
            size }) =>
        size &&
        css`
          font-size: ${ getFontSize(size)};
        `}
      ${
          ({
            centered }) =>
        centered &&
        css`
          text-align: center;
        `}
    
      ${
          ({
            nowrap }) =>
        nowrap &&
        css`
          white-space: nowrap;
        `}
    
      ${
          ({
            cropped }) =>
        cropped &&
        css`
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        `}
    `

为了保持 UI 一致性，我们在样式开始时重置默认浏览器 CSS，Text删除边距和填充，并设置overflow-wrap为break-word防止文本溢出破坏布局。然后我们继续处理它的属性。

让我们看看可以传递给Text组件的额外属性。虽然我们可以通过样式或类名来设置颜色，但大多数情况下我们会使用该color属性。它是一组有限的命名颜色，例如常规颜色、支持颜色或警报颜色。我们通过函数访问所有它们，getTextColorRecord而该函数又依赖于样式组件主题。请注意，所有名称都描述颜色，而不是说黄色或白色。这样我们就可以更改调色板并添加新主题，而无需更改Text组件。

该weight属性将regular,semibold和bold变为 400, 500, 600。对于大多数情况来说通常就足够了。但您也可以根据您的情况进行扩展，例如anddthin或选项。extrabold

这size是一个有趣且固执己见的酒店。当我们将像素作为数字传递时，它会被转换为雷姆。对我们来说，用像素来思考更容易。我们将其视为16px默认大小，并且为了制作较小的变体，传递14px比更直观0.875rem。同时，我们通过将像素转换为 rems 来使应用程序更易于访问，以便用户可以在浏览器设置中更改字体大小，应用程序也会相应地进行调整。

该height属性代表line-height并且可以是small、regular、 或large，但我们很少会使用它。

虽然有些人更喜欢使用文本变体，但根据我的经验，我发现依赖size和等属性weight来创建各种文本样式更为实用。然而，如果您的项目将受益于变体，您可以将其添加为属性，然后记录每个变体的样式。

最后还有centered、cropped和nowrap不言自明的帮助程序。

关注我的博客，您将在其中获得提示、技巧和挑战，以保持您的技能敏锐。记得关注我哦！