[Request]: Support Styled Components

[donalatorre]

I love this sidebar, and I'd like to be able to customize its styles in my project, but it seems I can't really change the style very much without scss, and I'd rather avoid installing it just for one library I use.

Have you considered supporting Styled Components? With it, customizing the sidebar would be much more easy and flexible. Something like this is what I have in mind:

import styled from 'styled-components;
export const StyledProSidebar = styled(ProSidebar)`
  // Copy-paste rules from scss here:
  ...
  .pro-sidebar {
     background-color: ${props => props.theme.sidebar-bg-color};
   }
  ...
`

StyledProSidebar.defaultProps = {
  theme: {
    ...
    sidebar-bg-color: "blue";
    ...
  }
}

Then, the sidebar could be used like this:

<StyledProSidebar theme={ { sidebar-bg-color: "red" } }>
  ...
</StyledProSidebar>;

The user wouldn't need to install scss, not even import a css file, and still have full control of the sidebar's style. Note that since styled-components would be an implicit dependency of the sidebar, users wouldn't need to install or import it at any point.

What do you think? I'm aware that having all style rules declared both in scss and styled-components is not too elegant, but the library would be much more usable, so I believe it's worth doing.

I would even recommend that you fully migrated to Styled Components and stopped using scss. Do you have a specific reason not to? Changes would not be that hard to write, and you could keep most of the style structure the same.

Please let me know what your thoughts are on this. If you agree this integration is a good idea, I'd be very glad to help you out implementing them and send out a PR or two :).

[azouaoui-med]

Hello @donalatorre , i really appreciate you taking the time to give such a constructive feedback, what you are suggesting is using props to customize the styling instead of a preprocessor which i think make sense for users who don't use a preprocessor, i guess i will take some time to think about a solution that will be more convenient for the majority of users, and if i using css in js is the better choice than i will add it in the next major release :)

[AliFahmy]

Hi @donalatorre is there any update on how to use the sidebar with styled-components?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[azouaoui-med]

version 1.x is using css in js instead of scss and you should be able to use styled-components