Why I can't see props in intellisense when using styled-system with styled components?

Question

So, first of all, I declare my component like this:

import styled from 'styled-components';
import {
    space, color, layout, flexbox, border,
} from 'styled-system';

const FlexWrapper = styled.div`
    display: flex;
    gap: ${({ gap }) => gap || '10px'};
    ${layout};
    ${space};
    ${color};
    ${flexbox};
    ${border};
`;

export default FlexWrapper;

Then I just use it:

return (
        <FlexWrapper flexDirection='column' width={width}>
            <FlexWrapper flexDirection='row' gap='30px'>
                {filters}
            </FlexWrapper>
        </FlexWrapper>
    );

Eventually, props work fine but vscode intellisense doesn't see it at all. Are there any solutions to how can I fix it?

Answer 1

I have this issue with code editors and IDEs, I left them alone If you're not using Typescript, I highly recommend you to use Typescript to improve your development speed.

npx create-react-app --template typescript //  :)

plz vote up if it's useful