![Kamille_Parks Kamille_Parks](https://community.airtable.com/legacyfs/online/avatars/3X/4/d/4dc3511981a644f44a5cdcc7718e61100912aaa3.png)
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Dec 15, 2020 02:07 PM
I’ve noticed that when using .loadCSSFromString()
the frontend renders multiple duplicates of the same <style>/<style>
element in the DOM body. Is there a way around this that I’m missing? In the example below, .loadCSSFromString()
is placed at top-level and not within a loop.
Solved! Go to Solution.
Accepted Solutions
![Stephen_Suen Stephen_Suen](https://community.airtable.com/legacyfs/online/avatars/3X/7/a/7a0c1505ad069717d130fcc0aae9747b8ff58c16.jpeg)
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Dec 15, 2020 03:28 PM
Are you calling loadCSSFromString
inside a React component? Assuming the styles don’t need to change, you could move this outside of the component, e.g. call it once at the top of your index file.
![Kamille_Parks Kamille_Parks](https://community.airtable.com/legacyfs/online/avatars/3X/4/d/4dc3511981a644f44a5cdcc7718e61100912aaa3.png)
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Dec 15, 2020 03:25 PM
Update: I noticed its creating a new <style>
everytime State gets updated. Still interested if there’s a way to load the css only once since we can’t use Webpack or some other compiler.
![Stephen_Suen Stephen_Suen](https://community.airtable.com/legacyfs/online/avatars/3X/7/a/7a0c1505ad069717d130fcc0aae9747b8ff58c16.jpeg)
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Dec 15, 2020 03:28 PM
Are you calling loadCSSFromString
inside a React component? Assuming the styles don’t need to change, you could move this outside of the component, e.g. call it once at the top of your index file.
![Kamille_Parks Kamille_Parks](https://community.airtable.com/legacyfs/online/avatars/3X/4/d/4dc3511981a644f44a5cdcc7718e61100912aaa3.png)
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Dec 15, 2020 03:37 PM
Yep, you’re right. Could have sworn I put it at top level but I see now its within a component. Thanks Stephen!
![](/skins/images/75AB00B4920FD2D67A8CABF77C9DECC4/responsive_peak/images/icon_anonymous_message.png)