Help

Welcome to the Airtable Community! If you're new here, check out our Getting Started area to get the most out of your community experience.

.loadCSSFromString() generating redundant style elements?

Topic Labels: Custom extensions
Solved
Jump to Solution
1407 3
cancel
Showing results for 
Search instead for 
Did you mean: 

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.

Screenshot 2020-12-15 135853

1 Solution

Accepted Solutions

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.

See Solution in Thread

3 Replies 3

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.

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.

Yep, you’re right. Could have sworn I put it at top level but I see now its within a component. Thanks Stephen!