How to create a Dynamic Theme with good practice for my Component?

Question

I need to create a dynamic theme for a particular component or several others, where techniques of clean code and good practice concerning structuring of directories, file separation by types among others.

I’m using the Styled-Component (this tag does not exist in the Brazilian community) for the stylization of my components, where in this documentation says the following about "Theming":

Theming:

Styled-Components has full theme support by exporting a wrapper component. This component provides a theme for all React components behind the context API. In the render tree, all styled components will have access to the given theme, even when they have multiple depth levels.

NOTE: returns your children to render, so it should involve only a single child node, as it can be used as the root of the render method () .

For more details about it visit this direct link to the documentation

What are my problems?

• Difficulty integrating this into my component
• Difficulty in integrating using all good practices of folder structuring, file type separation and functionality

NOTE:

I do not have an initial code to post, as I said above in my problems I am having difficulty integrating the "Theming" of Styled-component with the logic of React + Reactjs.