I have noticed that my ReactJS app has changed the styles, especially fonts once I have imported Cron component from react-cron-generator:
import Cron from 'react-cron-generator'
Looking into the code of cron.tsx I see that there are styles applied import './cron-builder.css'; which from my perspective cause the issue, because it has:
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
I would like to understand how it can happen that such imported component can override my defined styles and how it should be imported to avoid it.
I was looking into the styled components, but the problem is, that my styles are always overridden once I do the import Cron from 'react-cron-generator'.
Is there a way how to fix it?
Styles are applied based on how much their selector are detailed. check this link for more info. if an imported style has more detailed selector, its css class file is mentioned earlier or your styles are not as specific as that or you have not specified that selector, that imported style will apply.
And please don't use important. it may fix your problem but it is not a clean and maintainable solution although it is popular in css world.