The default styles add a CSS rule to change the page font to Arial

[PedroLimaSilva]

When this library is added to a project, its css rules affect elements that are not children of the autocomplete component.

Currently, it adds a rule with a * selector with font rules which will change the font to arial in most scenarios. Usually font rules are defined in the root element (using an html or body selector) and inherited to its children. If you want to use a certain font-family on your component, it should be defined at the component level not globally.

To be more precise, on src/config/config.js should have:

const GlobalStyle = createGlobalStyle`
  .your-component-class {
    box-sizing: border-box;
    font-family: ${(props) => props.theme.fontFamily};
    font-size: ${(props) => props.theme.fontSize};
  }
`

or define these rules some other place other than a global style, so it does not affect other components

[sickdyd]

Hello @PedroLimaSilva,

I could not understand your request: could you reformulate it?

Thanks.

[PedroLimaSilva]

I'm sorry, I've updated the issue description

[sickdyd]

Hello @PedroLimaSilva,

Thank you for your report! I updated RSA to v4.0.0 and now the global styles have been removed. I also updated the demo where you can see the update in action (check the last example).

[PedroLimaSilva]

That's great 😁 Btw, looking at your change, I'm unsure if you shouldn't include the box-sizing rule inside your component. Someone might be using box-sizing as content-box and throw your sizing out of wack. Again, I'm unsure about this since it's only relevant if you include your paddings in your size rules, but something to think about.