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:
- 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.

