ReactUSWDS Version & USWDS Version:

ReactUSWDS: 2.7.2
USWDS: 2.13.0

Describe the bug
A CSP (content-security-policy) is good requirement for government sites. See https://content-security-policy.com/

A starting point for a CSP includes style-src 'self' This means that using <element style= is forbidden as well as a page having a <style> header. Only class names and external stylesheets.

To Reproduce
Steps to reproduce the behavior:

1. Have a static build project (generates a static html site).

2. Add a CSP to the index.html as a <meta> (this is an alternative to modifying server headers)

    <meta
        http-equiv="Content-Security-Policy"
        content="style-src 'self'; "/>

(DISCLAIMER: this is the minimal CSP to demonstrate this bug an actual CSP would include a lot more restrictions)

3. Add code to display a react-uswds Modal dialog

4. Load page with the Modal dialog
   Result: the debug console shows

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' ...
t.getScrollbarWidth | @ | index.js:2

Discussion

The Modal's getScrollbarWidth() function to measure the width of the scrollbar breaks this policy. Specifically

outer.setAttribute(
      'style',
      'visibility: hidden; overflow: scroll; ms-overflow-style: scrollbar'
    )

This should be a relatively easy fix using a class name (see: https://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes mpen answer which includes a link to David Walsh's blog:).

Device and Browser Information (please complete the following information if describing a UI bug):

• OS: Mac OS
• Browser: Chrome v99