Third-party UI library [using styled-components] + Next.js SSR CSS rules ordering/specificity issue - user-interface

Question

I have a third-party library that uses styled-components v5.3.6
I am using this UI library in my Next-JS app. My Next-JS app also has styled-components v5.3.6 as a dependency, using which i overwrite styling for my UI components.
For instance, i have a component in my UI-library as :
const Header = (props) => {
return (
<Text p="0 14px" {...props}/>
);
}
Usage in my main-app
For my requirement , i require padding of 4px on right and left. So, i created a styled.ts file and i have overwritten the component
mystyled.styled.ts
import styled from "styled-components";
export const ModifiedTextComponent = styled(Text)`
padding: 0 4px;
`
> someComponent.ts
import modifiedTextComponent from './mystyled.styled.ts';
function test() {
return <ModifiedTextComponent> Text </ModifiedTextComponent>
}
Issue
On SSR, css-specificity for this component changes. Styling defined in <ModifiedTextComponent /> takes less priority over styling of my Text Component.
So during SSR, my ModifiedTextComponent always ends up with a padding of '14px' instead of `4px` on left and right-side.
Note, for this query, naming my third-party UI library as `MyLib`
What i tried.
To resolve this, i removed styled-components dependencies from my main-app and exposed styled utility from my third-party library
Third-party library
import styled from 'styled-components'
export {styled}
main-app > mystyled.styled.ts
import {styled} from "MyLib";
export const ModifiedTextComponent = styled(Text)`
padding: 0 4px;
`
Exposing styled utility from my third-party library i.e MyLib and consuming it directly seems to resolve the issue.
But this creates an extra dependency on my UI library. I would like to know if there is some other way to resolve this. Also, wanted to understand why specificity for my third party library is high over css-styling that i add in my app.
Solution - 2 , suggested by styled-components-library
https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
Please suggest if someone has a better solution to this, or an explanation to why CSS specificity gets affected with NextJS SSR and Styled-components.