search

rcpch / digital-growth-charts-react-component-library

A typescript React library for displaying RCPCH Digital Growth Charts from API data
https://growth.rcpch.ac.uk
MIT License
8 stars 11 forks source link

RCPCH Chart - Global styles are not encapsulated to component - v7.0.12 #109

Closed dmc-cambric closed 1 month ago

dmc-cambric commented 2 months ago

Hi Team,

Got another small issue with the font import changes. When the RCPCHChart component is rendered on the screen, its font is applied to other elements in our web app outside of the RCPCH component.

I think the source of the issue is the createGlobalStyle function from styled-components, I believe that when RCPCHChart component is mounted, the font styles applied to the header and body tags are applied globally to the DOM, and thus across our app.

Could these styles be changed instead to apply to tags within a wrapper div element so there's no overlap when using the component?

createGlobalStyle func: https://github.com/rcpch/digital-growth-charts-react-component-library/blob/5c6b367e8f682936ff5be2217c05c0f8222f9428/src/RCPCHChart/RCPCHChart.tsx#L56

In app example: image

mbarton commented 1 month ago

Thanks for the report and sorry for the delayed acknowledgement @dmc-cambric - we are working on this