Добавление подкомпонентов в стилизованный компонент с помощью потоковой типизации - PullRequest
Новая
       12

Добавление подкомпонентов в стилизованный компонент с помощью потоковой типизации

0 голосов
/ 17 сентября 2018

Я хотел бы добавить подкомпоненты к стилизованным компонентам, аналогичным тому, что указано здесь

Так что-то вроде этого: 

Text = styled.div`
  ${({color}) => color && `color: ${colors[color]};`}
`

Text.H1 = Text.withComponent('h1');
...

ПодвохЯ хочу сделать это с потоком ввода.

Вот где я сейчас нахожусь: 

import * as React from 'react';
import styled, {css, withTheme} from 'styled-components';
import type {ReactComponentFunctional, Theme, ReactComponentStyled} from 'styled-components';

type Props = {
  color?: "blue" | "green"
};

const Text = ReactComponentStyled<*> & SubComponents<*> = styled.div`
  ${({color}) => color && `color: ${colors[color]};`}
`

Text.H1 = Text.withComponent('h1');

Ошибка типа происходит в const Text. 

Cannot assign template string to Text because:
 • all branches are incompatible:
    • Either property H1 is missing in $npm$styledComponents$ReactComponentStyledStaticPropsWithComponent [1] but
      exists in SubComponents [2].
    • Or property H1 is missing in object type [3] but exists in SubComponents [2].
    • Or property H1 is missing in React.StatelessFunctionalComponent [4] but exists in SubComponents [2].
    • Or property H1 is missing in statics of $npm$styledComponents$ReactComponent [5] but exists in
      SubComponents [2].

     src/component/base/Text/Text.js
     43│   Caption?: ReactComponentFunctional<P & {theme: Theme}>,
     44│ };
     45│
 [2] 46│ const Text: ReactComponentStyled<*> & SubComponents<*> = styled.div`
     47│   ${({color}) => color && `color: ${colors[color]};`}
     65│ `;
     66│
     67│ Text.H1 = Text.withComponent('h1');
     68│ Text.H2 = Text.withComponent('h2');

     flow-typed/npm/styled-components_v3.x.x.js
 [3] 13│   & { defaultProps: DefaultProps }
 [4] 14│   & $npm$styledComponents$ReactComponentFunctionalUndefinedDefaultProps<Props>
       :
 [5] 23│ type $npm$styledComponents$ReactComponentClass<Props, DefaultProps = *> = Class<$npm$styledComponents$ReactComponent<Props, DefaultProps>>
       :
 [1] 70│   & $npm$styledComponents$ReactComponentStyledStaticPropsWithComponent<Props, ComponentList>

На данный момент Text создан, отсутствует H1, но я сделал этот тип необязательным, поэтому я думаю, что он должен работать.Я также не понимаю, почему это ошибка: H1 is missing in XXX but exists in SubComponents.На самом деле это правда, но я пересекаю SubComponents со стилевым типом компонента, поэтому я ожидаю, что это будет причиной его правильности.

После выяснения этого, я бы хотелсделать еще один шаг и добавить реквизиты по умолчанию и тему к подкомпоненту. 

Text.H1 = withTheme((props) => {
  const Component = Text.withComponent('h1');
  Component.defaultProps = {
    color: props.theme.heading,
    size: 'xxLarge',
    weight: 'medium',
  };
  return <Component {...props} />;
});

Styled-component 3 Поток: 0.70 React 16

Примечание. Я знаю, что у компонентов style 4 естьбыл выпущен с добавленным атрибутом as (который заменяет withComponent), но версия 4 в настоящее время не имеет файла libdef для работы.Это также в бета-версии.

...