The 'props' parameter implicitly has a type of 'any'. (Typescript)-CodePudding

I'm adding the dark and light theme effect, and in all containers it worked, but the background color 'props' in this code is not being recognized and returns as "any".

background-color: ${props => props.theme.colors.secondary};

The project is a task list tool and I made the "Type ContainersProps" to validate that the task has been verified. I believe there is conflict here.

import styled from 'styled-components';

type ContainerProps = {
    done: boolean;
}

export const Container = styled.div(({ done }: ContainerProps) => (
    `
    display: flex;
    background-color: ${props => props.theme.colors.secondary};
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    align-items: center;

    input {
        width: 25px;
        height: 25px;
        margin-right: 5px;
    }

    label {
        color: #000;
        text-decoration: ${done ? 'line-through' : 'initial'};
    }
`
));

CodePudding user response：

It appears that your issue is that you're mixing two ways of passing props to the styling (you are destructuring done from the props in the function being passed to styled.div() and then you are passing an additional function to be evaluated as the background-color). For custom props, you can look at the Styled-Component docs where you specify your custom type but still use a function to apply it. In your case, that would look like:

type ContainerProps = {
    done: boolean;
}

export const Container = styled.div<ContainerProps>`
    display: flex;
    background-color: ${props => props.theme.colors.secondary};
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    align-items: center;

    input {
        width: 25px;
        height: 25px;
        margin-right: 5px;
    }

    label {
        color: #000;
        text-decoration: ${props => props.done ? 'line-through' : 'initial'};
    }
`;