Используйте реквизиты для установки CSS-правил для стилизованных компонентов в проекте TypeScript.

Question

Со следующим кодом:

import * as React from 'react';
import styled from 'styled-components';

interface InnerSectionContainerProps {
    // tslint:disable-next-line:no-any
    children: any;
    inner: boolean;
}

const Container = styled.div`
  ${({ inner }) => inner && `
    max-width: 1150px;
    margin: 0px auto 0 auto;
  `}
`;

export default function InnerSectionContainer(props: InnerSectionContainerProps) {
    return (
        <Container inner={props.inner}>
            {props.children}
        </Container>
    );
}

Я получаю эти ошибки:

[ts] Type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>' has no property 'inner' and no string index signature.

Как мне изменить этот код для работы?

Answer 1

Следуйте второму примеру из этого раздела документации :

const Container = styled<InnerSectionContainerProps, "div">("div")`
  ${({ inner }) => inner && `
    max-width: 1150px;
    margin: 0px auto 0 auto;
  `}
`;