Есть ли встроенный интерфейс для гибких свойств, таких как align-items и justify-content?

Question

Я пишу интерфейс со свойствами flexAlignItems и flexJustifyContent, и вместо добавления значений вручную я ищу что-то похожее на HTMLAnchorElement.

interface ContainerProps {
  flexAlignItems?: "center" | "flex-start" | "flex-end" | "stretch"
  flexJustifyContent?:
    | "center"
    | "flex-start"
    | "flex-end"
    | "space-around"
    | "space-between"
}

Answer 1

Если вы не возражаете, не добавляйте к свойствам префикс flex-:

interface ContainerProps extends Pick<React.CSSProperties, 'alignItems' | 'justifyContent' /* add others */> {

}

И вы получите ContainerProps со свойствами, такими как alignItems et c.

Если вы хотите, чтобы там был префикс, вам нужно немного набрать:

interface ContainerProps {
  flexAlignItems?: React.CSSProperties['alignItems'];
  // add others
}

Answer 2

CSSStyleDeclaration интерфейс для HTMLElement.style не имеет ограниченных типов для свойств

Но!

Поскольку мы в мире React есть React.CSSProperties интерфейс, готовый к использованию.

interface ContainerProps extends React.CSSProperties {
}