Some CSS doesn't apply to my project in react and

Question

I really don't understand why, but part of the CSS don't apply to my code and I feel it's not normal...

import React from 'react';
import classes from './Sidebar.module.css';
import pictures from '.././Pictures/orchestra_logo.png';
import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent, Menu, MenuItem, SubMenu} from 'react-pro-sidebar';



const sidebarComponentFunc = (props) => {
    
    return( 
        <div className={classes.HideScrollbar}>
                <ProSidebar className={classes.SidebarStyle}>
                    <SidebarHeader className={classes.SidebarHeader}>
                        <a href="https://www.google.fr"><img className={classes.Picture} src={pictures} alt="not found"></img></a>
                        <br></br>
                        <br></br>
                    </SidebarHeader>
                    <SidebarContent className={classes.SidebarContent}>
                        <Menu>
                            <br></br>
                            <br></br>
                            <SubMenu title="✅ REQUESTS" className={classes.MenuItem}>
                                <MenuItem className={classes.SubMenuItem}>solved requests</MenuItem>
                            </SubMenu>
                            <br></br>
                            <br></br>
                            <br></br>
                            <MenuItem className={classes.MenuItem}>👥 CLIENT_NAME</MenuItem>
                            <SubMenu title="🔍 LEADS" className={classes.MenuItem}>
                                <MenuItem className={classes.SubMenuItem}>accounts</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>contacts</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>prospected</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>ready for prospection</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>enrichment</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>scoring</MenuItem>
                            </SubMenu>
                            <br></br>
                            <br></br>
                            <br></br>
                            <SubMenu title="🤝 OPPORTUNITIES" className={classes.MenuItem}>
                                <MenuItem className={classes.SubMenuItem}>weekly</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>monthly</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>by status</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>AE feedback</MenuItem>
                            </SubMenu>
                            <br></br>
                            <br></br>
                            <br></br>
                            <SubMenu title="📈 BDR REPORTING" className={classes.MenuItem}>
                                <MenuItem className={classes.SubMenuItem}>daily activity</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>analysis / comparison</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>weekly reviews</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>solved reviews</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>funnel</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>email stats</MenuItem>
                            </SubMenu>
                            <br></br>
                            <br></br>
                            <br></br>
                            <SubMenu title="📈 ICP REPORTING" className={classes.MenuItem}>
                                <MenuItem className={classes.SubMenuItem}>daily activity</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>analysis / comparison</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>weekly reviews</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>solved reviews</MenuItem>
                            </SubMenu>
                            <br></br>
                            <br></br>
                            <br></br>
                            <SubMenu title="📞 CALL REVIEWS" className={classes.MenuItem}>
                                <MenuItem className={classes.SubMenuItem}>new reviews</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>archived reviews</MenuItem>
                            </SubMenu>
                            <br></br>
                            <br></br>
                            <br></br>
                            <MenuItem className={classes.MenuItem}>📧 EMAIL TEMPLATES</MenuItem>
                            <br></br>
                            <br></br>
                            <br></br>
                            <MenuItem className={classes.MenuItem}>📜 CALLING SCRIPTS</MenuItem>
                            <br></br>
                            <br></br>
                            <br></br>
                            <SubMenu title="📕 PLAYBOOK" className={classes.MenuItem}>
                                <MenuItem className={classes.SubMenuItem}>read</MenuItem>
                                <MenuItem className={classes.SubMenuItem}>edit and create</MenuItem>
                            </SubMenu>   
                            <br></br>              
                            <br></br>   
                        </Menu>
                    </SidebarContent>

                    <SidebarFooter className={classes.SidebarFooter}>
                        <Menu>
                            <MenuItem className={classes.MenuItem}>BDR_manager_name</MenuItem>
                        </Menu>
                    </SidebarFooter>
                </ProSidebar>
        </div>
    );

};

export default sidebarComponentFunc;

and this is my css code:

.SidebarStyle{
    position:fixed;
    color: white;
    height:100%;
    top:0;
    left:0;
}

.Picture{
    display: block;
    margin-left: 5%;
    width: 150px;
    height: 39px;
}

.SidebarHeader{
    background-color: #28323E;
    height: 50px;
    padding-top: 10px;
    padding-left: 10px;
    width: 260px;
}

.MenuItem{
    background-color: #323E4D;
    padding-top: -15px;
    padding-bottom: -15px;
}

.SubMenuItem{
    background-color: #323E4D;
    padding-top: -15px;
    padding-bottom: -15px;
}


.SidebarContent{
    font-size: 13px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #323E4D;
}

.SidebarFooter{
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #323E4D;
}

.pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item {
    padding-left: 0px;
}

.pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item {
    margin-top:1px;
    padding: 3px 30px 5px 22px;
}

.HideScrollbar{
    overflow-y: hidden;
}

There are things that apply to the code: for example in the first class in CSS if I change color to red, it works, but if I want to set font-size: 29px; it doesn't work. The last class that should hide the scrollbar doesn't work too.. I am so confused, thank you for your help if someone can help me:)

This is how look the sidebar:

Answer 1

the npm module react-pro-sidebar that you are using in application will have some default styling pre-applied if you want to change the styling you need to override the existing styling

thanks