Implement new component using existing theme

[mrharel]

Hi, I am new to the concept of styled-components and will like to know if it is possible to somehow reuse the styles already in the dashboard to build and extend additional components to be using the same theme styles.

For example, if i want to implement my own post component like this https://github.com/booleanhunter/ReactJS-AdminLTE/tree/master/src/components/post How can i re-use the styles?

[zksailor534]

This is a good question, I had to look into it myself. It turns out that styled-components provides a decorator/wrapper withTheme that injects the theme object which was provided to the parent into any child component. I checked and this even works past react-router, which blocks passing other props. See this for use: styled-components theming

Unfortunately, I haven't created any documentation for the theme variables outside of the source itself, but look in src/styles and specifically variables.js. I think it's fairly clear, but then I wrote it...

I had planned to eventually add those components to this library, so if you feel like contributing either components or documentation so others can do the same, I'd welcome it.

[mrharel]

How about adding the variables and the skins to the exported modules? Something like this:

import './main.css';

import Dashboard from './components/Dashboard';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Variables from './styles/variables';
import Skins from './styles';

module.exports = {
  Dashboard,
  Header,
  Sidebar,
  Variables,
  Skins,
};

This will allow developers reuse the colors to write additional components, and if they switch skin, it will also switch their components.

what do you think?

[zksailor534]

I could certainly add those to the exported modules, but it wouldn't tie the components to the theme that is currently in use. The developer would be able to reuse the colors, etc to write the component, but they'd have to control theme state on their own.

If the use case is to have a separate component that could be used as a child under <Dashboard /> with matching theme, I think withTheme is the only way to go. A component could then be developed that had certain default theme parameters, but could be overridden by the provided wrapper. I could wrap and ship withTheme as part of this package, but it would make it larger, which I'm not keen on.

[mrharel]

I agree, <ThemeProvider> is the way to go here. If i will have some time I might implement it myself and create a PR for you, if you want to see if you want to add it.

[zksailor534]

I'm adding a reference to this in the README. It could probably be expanded upon, but I've been thinking it's best for this package for withTheme to remain separate, so that's how I wrote it in. Documentation for the theme variables will also be TBD. I will close this issue with that commit.