Материал пользовательского интерфейса CSS-in-JS - PullRequest
Новая
       37

Материал пользовательского интерфейса CSS-in-JS

0 голосов
/ 15 марта 2019

Я настраиваю проект, используя React, React Admin, Babel, TypeScript и Webpack. Я использую редактор VSCode.

Я пытаюсь использовать новое решение для стилевого интерфейса материалов , а затем, в частности, API-интерфейс Styled Components.

Я настроил TSLint, поэтому требуется добавить typedef в объявление переменной.

Когда я пишу следующий код: 

const StyledButton = styled(Button)({
  backgroundColor: 'yellow',
  height: 10,
  width: 80,
});

TSLint выдает следующую ошибку: expected variable-declaration: 'StyledButton' to have a typedef (typedef)tslint(1). Обратите внимание, что Button, который я передаю styled(), является компонентом из пользовательского интерфейса материала:

import Button from '@material-ui/core/Button';

При наведении курсора на StyledButton я вижу следующее:

enter image description here

Так что в основном VSCode сообщает мне тип переменной StyledButton, которая равна React.ComponentType. Поэтому, если я обновлю свой код до этого: 

const StyledButton: React.ComponentType = styled(Button)({
  backgroundColor: 'yellow',
  height: 10,
  width: 80,
});

Я не получаю никаких ошибок. Отлично!

Но теперь моя проблема начинается: когда я заменяю Button на фактический элемент HTML button: 

const StyledButton: React.ComponentType = styled('button')({
  backgroundColor: 'yellow',
  height: 10,
  width: 80,
});

Мой редактор выдает следующую ошибку: 

Type 'ComponentType<never>' is not assignable to type 'ComponentType<{}>'.
  Type 'ComponentClass<never, any>' is not assignable to type 'ComponentType<{}>'.
    Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any>'.
      Types of property 'getDerivedStateFromProps' are incompatible.
        Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'.
          Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'.
            Types of parameters 'nextProps' and 'nextProps' are incompatible.
              Type 'Readonly<{}>' is not assignable to type 'never'

Когда я убираю typedef и снова наводю курсор на StyledButton, я вижу следующее:

enter image description here

Итак, VSCode сообщает мне, что тип изменился на React.ComponentType<never>. Давайте обновим мой код до: 

const StyledButton: React.ComponentType<never> = styled('button')({
  backgroundColor: 'yellow',
  height: 10,
  width: 80,
});

И ошибки уходят, приятно! Давайте использовать StyledButton: 

<StyledButton>
  I'm a button
</StyledButton>

Это выдает еще одну ошибку: 

This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided.ts(2745)

Я что-то не так делаю или? Как я могу правильно ввести StyledButton и не получить ошибки, когда я на самом деле использую компонент?

Я также опубликовал этот вопрос на GitHub, но, к сожалению, он был закрыт: https://github.com/mui-org/material-ui/issues/14898

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать и заранее спасибо!

...