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.

Need Help With React Development?

Work with our skilled React developers to accelerate your project and boost its performance.

Hire Reactjs Developers

Support On Demand!

Related Q&A