Попытка использовать цвет как свойство с компонентом эмоций (стилизованным), вызывающим ошибки в машинописи - PullRequest
Новая
       11

Попытка использовать цвет как свойство с компонентом эмоций (стилизованным), вызывающим ошибки в машинописи

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

В настоящее время я работаю над проектом React, который использует emotion (стилизованный пакет) для стилей CSS и машинописного текста (созданного с помощью create-реагировать-app). Я относительно новичок в машинописи и немного наткнулся на кирпичную стену, пытаясь использовать реквизит с тем же именем, что и атрибут, доступный для базового элемента, который я пытаюсь стилизовать.

Например, при попытке стилизовать div, если я создаю интерфейс, который определяет цветовой объект, который является объектом, я получаю ошибку при передаче этого интерфейса в стилизованную функцию. Я полагаю, что это жалуется, потому что цвет, являющийся объектом, не удовлетворяет ограничению цвета, являющегося строкой или неопределенным, который устанавливается где-то еще (предположительно, в типах функции в стиле эмоций?). Вот основной пример того, что я пытаюсь сделать. 

import styled from '@emotion/styled';
import { ComponentType } from 'react';

interface ColorPalette {
    blue: string;
    red: string;
}

interface BoxProps {
    color: ColorPalette;
    notColor?: ColorPalette;
}

const Box = styled('div')<BoxProps>(({ color, notColor }) => ({ // Here <BoxProps> shows the error that ColorPalette doesn't satisfy the constraint of string
    color: color.blue,
    backgroundColor: color.red,
}));

const Test: ComponentType = () => <Box color={{ red: 'red', blue: 'blue' }} />; // This doesn't actually show any errors because it recognises that the inputted object matched ColorPalette

export default Box;

По сути, я получаю сообщение об ошибке: «Тип« BoxProps »не удовлетворяет ограничению« Pick, HTMLDivElement>, «color»>, «color»> '. Типы свойства 'color' несовместимы. Тип '{синий: строка; красный: строка} | undefined «нельзя назначить типу» string | не определено. Тип '{синий: строка; red: string} 'нельзя назначить типу' string '. "

Это довольно простой пример, в действительности я использую также библиотеку styled-system, которая создает цветовую опору, которая может быть массивом или объектом (для установки различных значений на основе точек останова), что затем он преобразуется в строку, но ошибка та же. У него есть такая же проблема с другими типами элементов, как например, предоставление ширины для элемента svg.

Мне кажется, что я просто упускаю что-то действительно простое, что я не понимаю в Typescript, как я мог это исправить. Я могу установить цветную опору на любой в интерфейсе, но тогда это, по существу, теряет значение печатей в первую очередь.

1 Ответ

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

После того, как вы добавили некоторые подробности, теперь я понимаю, что вы работаете над styled-components.Вы хотите добавить тип для вас styled.div реквизита.

Вы можете сделать это так. 

const Box = styled('div')<BoxProps>`
     color: ${props => props.color.blue};
     backgroundColor: ${props => props.color.red},
`;
...