Use props to set styled components CSS rules in TypeScript project

Question

With the following code:

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>
    );
}

I get this errors:

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

How can I change this code to work?

Matt McCutchen · Accepted Answer · 2018-10-16 14:24:56Z

1

Follow the second example from this section of the documentation:

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

answered Oct 16, 2018 at 14:24

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use props to set styled components CSS rules in TypeScript project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related