Dynamic object props (initial, hover, focus)

[bbg]

Hi Everyone,

I created one generic "styled-component". Here certain styles come dynamically via props. If the incoming value is like (bgColor="red"), I render directly.

What if the incoming value is object.

<Component
    display="flex"
    w="400px"
    p={{
        initial: "20px",
        hover: "30px",
        focus: "50px"
    }}
    pl="50px"
    bgColor={{
        initial: "black",
        hover: "red",
        focus: "blue"
    }}
    border={{
        initial: "10px solid purple",
        hover: "10px solid green",
        focus: "5px solid blue",
        dark: "50px solid red"
    }}
>
    Content
    <div>- Button</div>
</Component>

I'm grouping the values that come in the object one by one.

{
   ...initial,
   "&:hover": { ...hover },
   "&:focus": { ...focus },
   "&:disabled": { ...disabled },
   "@media (min-width: 640px)": { ...sm },
   "@media (min-width: 768px)": { ...md },
   "@media (min-width: 1024px)": { ...lg },
   "@media (min-width: 1280px)": { ...xl },
   "@media (min-width: 1536px)": { ...xxl }
}

I create an output like this and return it to Styled-Component.

If you want to review my code: https://codesandbox.io/s/styled-components-object-props-pg4c30

My goal is for the style to be able to send initial, hover, focus, etc... values as an object via the prop.

I request you to review my code. I am open to all your thoughts. Please critique or edit my code based on your suggestion.

Thank you