How to deal with CSP nonces?

[l-you]

Please, help to deal with strict CSP policy while using Flowbite.
I installed flowbite-react in my NextJS app.
One of its components injects the following CSS code.

<style type="text/css">.indiana-scroll-container {
  overflow: auto; }
  .indiana-scroll-container--dragging {
    scroll-behavior: auto !important; }
    .indiana-scroll-container--dragging > * {
      pointer-events: none;
      cursor: -webkit-grab;
      cursor: grab; }
  .indiana-scroll-container--hide-scrollbars {
    overflow: hidden;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none; }
    .indiana-scroll-container--hide-scrollbars::-webkit-scrollbar {
      display: none !important;
      height: 0 !important;
      width: 0 !important;
      background: transparent !important;
      -webkit-appearance: none !important; }
  .indiana-scroll-container--native-scroll {
    overflow: auto; }

.indiana-dragging {
  cursor: -webkit-grab;
  cursor: grab; }</style>

I have a very strict CSP policy that does not allow an unsafe-inline CSS.
I have a nonce generated in NextJS middleware, that can be accessed by server-side components. I use NextJS 14 with "app" directory.
Is there any way to pass a nonce to CSS styles mentioned earlier?
It should look like <style type="text/css" nonce="dfsagssdfgsdfsgdfsg">.
Style script is injected by react-indiana-drag-scroll that is flowbite-react dependency.

[tulup-conner]

You'll have to bring this to the react-indiana-drag-scroll itself, we're just using it.