0

As a simple way of identifying pure styled components in jsx, I have been creating an object of styled components like this:

import { DefaultTheme, StyledComponent } from 'styled-components';

interface ObjectOfStyled {
  [prop: string]: StyledComponent<React.ComponentType<any>, DefaultTheme>;
}

export type { ObjectOfStyled };

Then in the files of the React components themselves:

import React, { LegacyRef, useCallback, useEffect, useRef } from 'react';
import {
  Image,
  Text,
  View,
} from 'react-native';
import styled from 'styled-components/native';

import { ObjectOfStyled } from '../../types';

const S: ObjectOfStyled = {};

S.AddressContainer = styled(View)`
  flex: 1;
`;

S.AddresseeText = styled(Text)`
  /* ...some CSS properties */
`;

S.AddresseeLineText = styled(Text)`
  /* ...some CSS properties */
`;

const AddressHeader = () => (
  <S.AddressContainer>
    <S.AddresseeText>FirstName LastName</S.AddresseeText>
    <S.AddressLineText>555 This Crazy Road</S.AddressLineText>
    <S.AddressLineText>Madision, WI 45678</S.AddressLineText>
  </S.AddressContainer>
)

There are two problems with this:

  1. Code completion is totally lost. For example, in VS Code this: enter image description here

becomes this: enter image description here

  1. The linter can't pick up on dead S.MyStyledComponent.

I am looking for a way to solve the first problem, I assume a better way of writing ObjectOfStyled. If anyone could help, it would be greatly appreciated.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.