I recently started using material-ui and noticed that it applies inline styles to each component. After running a test with multiple instances of the same component, I realized that there was no CSS-based styling - only repeated inline styles were generated. Since many components on a real web page may have identical styles, I am wondering if there is a more efficient way to avoid this redundant styling and potentially reduce the amount of data passed to the user during page loading.
Is there a method to minimize the number of inline styles used in favor of alternative handling?
Here is an example of my code:
<div>
<Paper style={style} zDepth={1} ><FlatButton label="exit" /></Paper>
<Paper style={style} zDepth={1} ><FlatButton label="exit" /></Paper>
<Paper style={style} zDepth={1} ><FlatButton label="exit" /></Paper>
</div>
When rendering this simple component with React, the resulting HTML file contains the following div three times:
<div style="color: rgba(0, 0, 0, 0.87); background-color: rgb(255, 255, 255); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; ..."The exact div structure is repeated three times in my code, each containing inline styles.
If possible, I would like to explore ways to decrease reliance on inline styles and utilize CSS in place of these repetitive declarations.
Thank you!