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

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 项目中使用 props 设置样式组件 CSS 规则

Use props to set styled components CSS rules in TypeScript project

typescript

reactjs

styled-components