How to load additional stylesheet from external url?

[davebrown1975]

If we are printing a specific component, from what I understand in the documentation is that we lose styles which are applied to any parental elementals. So if we need to use Bootstrap styles for example rows, cols, etc for layout then all this will be lost and we end up with all presentation stacked in a single column.

If that's the case is there a way to specify the URL to the bootstrap stylesheet at it's external URL so we can ensure the styles will be present at any time?

[MatthewHerbst]

Hello. Global styles and style sheets will still be loaded. What won't carry over are styles for children of parents that are not copied. For example, if you have:

<div style={{ color: 'red' }}>
  <ComponentToPrint ref={componentRef} />
</div>

Then the color style will not apply to any elements within the ComponentToPrint.

If you need to print with a certain layout, just make sure that layout is included in what you want to print:

// Instead of
<Row>
  <Col md="6">
    <ComponentToPrint ref={componentRef} />
  </Col>
</Row>

// Do
<Row ref={componentRef}>
  <Col md="6">
    <ComponentToPrint />
  </Col>
</Row>

Does that clear up your questions at all?