I am trying to do this:

import React from 'react'
import styled, { CSSProperties, useTheme } from 'styled-components'
import { Theme } from './styles'
import useProps from './useProps'

export type BasicInputPropsType<T> = T | Array<T>

export type FactoryStyledPropsType = {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  styledProps: any
}

export type InputPropsFunctionType<I, T> = (props: I) => T

export type InputPropsType<T, I> = T extends Function
  ? InputPropsFunctionType<I, T>
  : T

export default function FactoryFactory<T>(
  as: string,
  serializer: (theme: Theme, props: T) => CSSProperties,
) {
  return function Factory<I>(inputProps: InputPropsType<T, I>) {
    const isPropsFunction = typeof inputProps === 'function'
    const Styled = styled.div<FactoryStyledPropsType>(
      props => props.styledProps,
    )

    function Component(props: I) {
      const actualProps = isPropsFunction
        ? (inputProps as InputPropsFunctionType<I, T>)(props)
        : props
      const theme = useTheme()

      const { styledProps, elementProps } = useProps(
        actualProps,
        theme,
        serializer,
      )

      return (
        <Styled
          {...elementProps}
          styledProps={styledProps}
        />
      )
    }

    Component.toString = Styled.toString

    return Component
  }
}

Essentially that styledProps, it should return what the styled component expects, but I can't figure out how to type it. I am looking at this type definition:

export interface ThemedStyledFunctionBase<
    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
    T extends object,
    O extends object = {},
    A extends keyof any = never
> {
    (first: TemplateStringsArray): StyledComponent<C, T, O, A>;
    (
        first:
            | TemplateStringsArray
            | CSSObject
            | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>>,
        ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>>>
    ): StyledComponent<C, T, O, A>;
    <U extends object>(
        first:
            | TemplateStringsArray
            | CSSObject
            | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,
        ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>
    ): StyledComponent<C, T, O & U, A>;
}

But that is way too complex, I am not sure what to do. What is the type I need to specify for my styledProps?

I'm doing a project from my job and here we use Styled Components to do all the components. I`m trying to implement new approaches to do a clean code without repetition. I have a lot of div's with the code bellow. So I have this question, in this case, when I have the same code from a simple flex div, makes sense set the style directly on a div or it is better create a component with this?

What is the personal rule for you guys to create a new component with styled components?

<div style={{display: 'flex'**,** justifyContent: 'space-between'**,** alignItems: 'center'}}>