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

遵循this section of the documentation中的第二个示例：

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

使用道具在TypeScript项目中设置样式化组件CSS规则

1 个答案: