The struggle of the provider pattern

I have a split opinion to providers. On one hand it is very nice to just make data kind of "public" in a specific scope, but on the other hand it's very much not self-explanatory and kind of works against my understanding of "component driven design" which should ensure context-independent functionality of single components.

Example:

<ThemeProvider>
  // works since it has provided data
  <ThemedButton />
</ThemeProvider>

// does not work since provided data is missing
<ThemedButton />

In that example the developer needs to know about ThemeProvider and how to use it, if he wants to use ThemedButton.

I am a freelancer, so I face new projects quite often, and as soon as there is some usage of providers, I can't really find them by myself but have to get help of another developer that has advanced knowledge of the project.

I'm wondering if there is a way to actually make the provider pattern more self-explanatory, so a new developer can figure out about it easily by just reading the code.

Btw: I'm a JS developer preferring React if that helps.