типизированные системные реквизиты с помощью TypeScript

Question

Я использую styled-system , и одним из ключей библиотеки является использование сокращенных подпорок для легкого и быстрого создания тем.

Я упростил свой компонент, но вотинтересная часть:

import React from 'react'
import styled from 'styled-components'
import { color, ColorProps } from 'styled-system'

const StyledDiv = styled('div')<ColorProps>`
  ${color}
`

const Text = ({ color }: ColorProps) => {
  return <StyledDiv color={color} />
}

У меня есть ошибка на color реквизит, которая говорит:

Тип 'строка |(строка | ноль) [] |undefined «нельзя назначить типу» string |(строка & (строка | ноль) []) |undefined '.

Я думаю, это потому, что styled-system использует то же имя, что и собственный атрибут HTML color, и оно конфликтует.

Как мне решить эту проблему?

Answer 1

color кажется объявленным в файле объявлений реакции под HTMLAttributes - он не экспортируется.

Мне пришлось обойти это, создав настраиваемую подпорку

Пример использует @emotion/styled, но также работает с styled-components

// component.js
import styled from '@emotion/styled';
import { style, ResponsiveValue } from 'styled-system';
import CSS from 'csstype';

const textColor = style({
  prop: 'textColor',
  cssProperty: 'color',
  key: 'colors'
});


type Props = {
  textColor?: ResponsiveValue<CSS.ColorProperty>
}

const Box = styled.div<Props>`
  ${textColor};
`

export default Box;

// some-implementation.js
import Box from '.';

const Page = () => (
  <Box textColor={['red', 'green']}>Content in a box</Box>
);

Answer 2

Что я сделал, так это использовал возможности приведения типов Typescript и не изменял логику системной системы.например:

const Heading: React.FC<ColorProps> = ({ color, children }) => {
  return <HeadingContainer color={(color as any)} {...props}>{children}</HeadingContainer>;
};

Answer 3

Вместо использования ColorProps, попробуйте использовать color: CSS.ColorProperty (`import * as CSS from 'csstype');Вот суть, показывающая, как я создаю какой-то типизированный примитив "Box" с машинописной / стилизованной системой: https://gist.github.com/chiplay/d10435c0962ec62906319e12790104d1

Удачи!