Lately, I've been experiencing a strange issue with my styles when using both scss and styled-components in combination. It seems like there is a race situation where the final render alternates between applying styles from scss and my custom styles written with styled-components. This typically occurs on the first or second load of the app. Even after several hard refreshes, the inconsistency persists. Has anyone encountered this problem before? I'd prefer not to rely on using !important everywhere to resolve it and instead aim to understand the root cause behind it.
The screenshots below illustrate how _sidebar.scss overrides the .sidebar styles that I defined:
Initially:
https://i.sstatic.net/uBP73.png
After multiple refreshes:
https://i.sstatic.net/R0U9O.png
Below is a component example:
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import SidebarLinks from './SidebarLinks';
import FormSelectPrinter from "../printer/FormSelectPrinter"
import sidebarData from "../data/";
import {ModalConsumer} from "../components/ModalContext";
import Modal from "../components/Modal";
import { createGlobalStyle } from "styled-components";
const GlobalSidebarStyle = createGlobalStyle`
.sidebar {
// Styles here
}
// More styles...
`
function Sidebar(props) {
// Function components
return (
<>
<GlobalSidebarStyle />
<aside className={`sidebar ${props.sidebarToggled? 'toggled' : ''}`}>
<div className="scrollbar-inner">
<div>
// Content here
</div>
<SidebarLinks sidebarData={sidebarData} toggleSidebar={props.toggleSidebar}></SidebarLinks>
</div>
</aside>
</>
)
}
export default Sidebar;