Mastering SCSS Custom Styling for React Pro Sidebar

For react-pro-sidebar versions above 1.0.0-alpha.7, you can implement the following approach:

import { Sidebar, ProSidebarProvider, sidebarClasses } from 'react-pro-sidebar';

function CustomSidebar() {
  return <ProSidebarProvider>
    <Sidebar
      rootStyles={{
        [`.${sidebarClasses.container}`]: {
          height: "100vh"
        },
      }}
    >
    </Sidebar>
</ProSidebarProvider>
}

export default CustomSidebar;

For react-pro-sidebar versions between 1.0.0-alpha.1 and 1.0.0-alpha.7 , it’s necessary to apply styling using CSS-in-JS, particularly with styled components.

For react-pro-sidebar versions below or equal to 0.7.1, the following solution will work:

1. Create a custom.scss file where you can customize the sidebar styles using SASS variables. You can override various SASS variables to define your own styles according to your preferences.

// Define your custom SASS variables
$sidebar-width: 500px;
$sidebar-height: 100vh;

@import ‘~react-pro-sidebar/dist/scss/styles.scss’;

.pro-sidebar {
height: $sidebar-height;
}

2. Import the custom.scss file in your React component

import './custom.scss';

Prerequisites:

Make sure you have installed node-sass to support SASS in your project.
If you had previously included ‘react-pro-sidebar’ CSS by using the statement import ‘react-pro-sidebar/dist/css/styles.css’; , make sure to remove this import to avoid conflicts with your customized SCSS style.