typescript 如何获取React /样式化组件的CSS类型？

gg58donl 于 2023-01-14 发布在 TypeScript

关注(0)|答案(1)|浏览(201)

我在我的样式化组件中遇到此错误：

Type 'string | undefined' is not assignable to type 'WordBreak | undefined'.

它正在这里发生：

type PropsType = {
  breakEverywhere?: boolean
  breakWord?: boolean
}

const Text = styled.p<PropsType>(props => ({
  wordBreak: getWordBreak(props),
}))

function getWordBreak(props: PropsType): string | undefined {
  if (props.breakWord) {
    return 'break-word'
  }
  if (props.breakEverywhere) {
    return 'break-all'
  }
}

这个问题可以通过去掉getWordBreak函数中的类型注解string | undefined来解决。但是我如何添加一个类型注解呢？它写着WordBreak，但是google搜索WordBreak类型定义没有任何结果，也没有VSCode帮助。有什么想法吗？
如果我用类似的方法把textAlign抽象到，它会出现同样的问题，它会讨论TextAlign类型，看起来csstype也没有帮助。
如果在已设置样式的构件中使用此函数：

textAlign: props.align ? TEXT_ALIGN[props.align] : undefined,

我有这个：

type AlignType = 'center' | 'end' | 'start'

const TEXT_ALIGN: Record<AlignType, string> = {
  center: 'center',
  end: 'right',
  start: 'left',
}

然后我得到这个：

Types of property 'textAlign' are incompatible.
  Type 'string | undefined' is not assignable to type 'TextAlign | undefined'.
    Type 'string' is not assignable to type 'TextAlign | undefined'.ts(2345)

我可以用一个无类型函数来修复它：

function getTextAlign(align: AlignType) {
  switch (align) {
    case 'center':
      return 'center'
    case 'end':
      return 'right'
    default:
      return 'left'
  }
}

但是这很难看，我怎么能用Record的方式或者更干净的方式来做呢？我怎么能访问这些类型呢？

typescript

来源：https://stackoverflow.com/questions/75104227/how-to-get-css-types-for-react-styled-components

1条答案

按热度按时间

0x6upsns1#

看起来csstype也帮不上忙。
样式化组件类型是基于csstype的，所以你应该能够从那里得到你所需要的。
类型WordBreak位于csstype的命名空间Property中：

export namespace Property {
  // ...
  export type WordBreak = Globals | "break-all" | "break-word" | "keep-all" | "normal";
  // ...
}

将它与代码示例一起使用：

import styled from "styled-components"
import { Property } from "csstype"

const Text2 = styled.p<PropsType>(props => ({
    wordBreak: getWordBreak2(props), // Okay
}))

function getWordBreak2(props: PropsType): Property.WordBreak | undefined { // Okay
    if (props.breakWord) {
        return 'break-word'
    }
    if (props.breakEverywhere) {
        return 'break-all'
    }
    return
}

Playground链接

赞(0）回复(0）举报 2023-01-14

我来回答

typescript 如何获取React /样式化组件的CSS类型？

1条答案

相关问题

热门标签

最新问答