From 8c46fe1956841b1482a59a834b1c28898d3d41f2 Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Wed, 29 May 2024 17:02:08 +0000
Subject: [PATCH 01/14] feat: Add emotionOptions

---
 README.md                                     |  1 +
 .../component/src/ScrollToBottom/Composer.js  | 26 ++++++++++---------
 packages/component/src/useEmotion.js          | 22 ++++++++++++++++
 3 files changed, 37 insertions(+), 12 deletions(-)
 create mode 100644 packages/component/src/useEmotion.js

diff --git a/README.md b/README.md
index 8d60e69..3a4e923 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ export default props => (
 | `className`             | `string`   |                              | Set the class name for the root element                                                                                        |
 | `debounce`              | `number`   | `17`                         | Set the debounce for tracking the `onScroll` event                                                                             |
 | `debug`                 | `bool`     | `NODE_ENV === 'development'` | Show debug information in console                                                                                              |
+| `emotionOptions`        | `object`   | `undefined`                  | Additional options for the internal Emotion instance                                                                           |
 | `followButtonClassName` | `string`   |                              | Set the class name for the follow button                                                                                       |
 | `initialScrollBehavior` | `string`   | `smooth`                     | Set the initial scroll behavior, either `"auto"` (discrete scrolling) or `"smooth"`                                            |
 | `mode`                  | `string`   | `"bottom"`                   | Set it to `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top                                                           |
diff --git a/packages/component/src/ScrollToBottom/Composer.js b/packages/component/src/ScrollToBottom/Composer.js
index 85adc3b..3939763 100644
--- a/packages/component/src/ScrollToBottom/Composer.js
+++ b/packages/component/src/ScrollToBottom/Composer.js
@@ -1,4 +1,3 @@
-import createEmotion from '@emotion/css/create-instance';
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -12,6 +11,7 @@ import State1Context from './State1Context';
 import State2Context from './State2Context';
 import StateContext from './StateContext';
 import styleConsole from '../utils/styleConsole';
+import useEmotion from '../useEmotion';
 import useStateRef from '../hooks/internal/useStateRef';
 
 const DEFAULT_SCROLLER = () => Infinity;
@@ -21,10 +21,6 @@ const MODE_TOP = 'top';
 const NEAR_END_THRESHOLD = 1;
 const SCROLL_DECISION_DURATION = 34; // 2 frames
 
-// We pool the emotion object by nonce.
-// This is to make sure we don't generate too many unneeded <style> tags.
-const emotionPool = {};
-
 function setImmediateInterval(fn, ms) {
   fn();
 
@@ -55,6 +51,7 @@ const Composer = ({
   children,
   debounce,
   debug: debugFromProp,
+  emotionOptions,
   initialScrollBehavior,
   mode,
   nonce,
@@ -501,13 +498,16 @@ const Composer = ({
     }
   }, [animateToRef, checkInterval, debug, mode, scrollToSticky, setSticky, stickyRef, target, targetRef]);
 
-  const styleToClassName = useMemo(() => {
-    const emotion =
-      emotionPool[nonce] ||
-      (emotionPool[nonce] = createEmotion({ key: 'react-scroll-to-bottom--css-' + createCSSKey(), nonce }));
-
-    return style => emotion.css(style) + '';
-  }, [nonce]);
+  const emotionConfig = useMemo(
+    () => ({
+      key: 'react-scroll-to-bottom--css-' + createCSSKey(),
+      nonce,
+      ...emotionOptions
+    }),
+    [emotionOptions, nonce]
+  );
+  const emotion = useEmotion(emotionConfig);
+  const styleToClassName = useCallback(style => emotion.css(style) + '', [emotion]);
 
   const internalContext = useMemo(
     () => ({
@@ -623,6 +623,7 @@ Composer.defaultProps = {
   children: undefined,
   debounce: 17,
   debug: undefined,
+  emotionOptions: undefined,
   initialScrollBehavior: 'smooth',
   mode: undefined,
   nonce: undefined,
@@ -634,6 +635,7 @@ Composer.propTypes = {
   children: PropTypes.any,
   debounce: PropTypes.number,
   debug: PropTypes.bool,
+  emotionOptions: PropTypes.any,
   initialScrollBehavior: PropTypes.oneOf(['auto', 'smooth']),
   mode: PropTypes.oneOf(['bottom', 'top']),
   nonce: PropTypes.string,
diff --git a/packages/component/src/useEmotion.js b/packages/component/src/useEmotion.js
new file mode 100644
index 0000000..e5f496e
--- /dev/null
+++ b/packages/component/src/useEmotion.js
@@ -0,0 +1,22 @@
+import createEmotion from '@emotion/css/create-instance';
+import { useEffect, useMemo } from 'react';
+
+export default function useEmotion(emotionOptions) {
+  const emotion = useMemo(() => createEmotion(emotionOptions), [emotionOptions]);
+
+  useEffect(
+    () =>
+      emotion &&
+      (() => {
+        const {
+          sheet: { container, tags }
+        } = emotion;
+        for (const child of tags) {
+          container.removeChild(child);
+        }
+      }),
+    [emotion]
+  );
+
+  return emotion;
+}

From bea612e202719f8a75ca1ac9d4764618538b8196 Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Wed, 29 May 2024 17:20:40 +0000
Subject: [PATCH 02/14] Add tests and pass through emotionOptions

---
 __tests__/should-respect-options.html         | 52 +++++++++++++++++++
 __tests__/should-respect-options.js           |  3 ++
 packages/component/src/BasicScrollToBottom.js |  4 ++
 3 files changed, 59 insertions(+)
 create mode 100644 __tests__/should-respect-options.html
 create mode 100644 __tests__/should-respect-options.js

diff --git a/__tests__/should-respect-options.html b/__tests__/should-respect-options.html
new file mode 100644
index 0000000..d4ccab3
--- /dev/null
+++ b/__tests__/should-respect-options.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title></title>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="/react-scroll-to-bottom.development.js"></script>
+    <script src="/test-harness.js"></script>
+    <script src="/assets/page-object-model.js"></script>
+  </head>
+  <body>
+    <div id="styles"></div>
+    <div id="app"></div>
+  </body>
+  <script type="text/babel" data-presets="react">
+    'use strict';
+
+    const additionalOptions = {
+      container: document.getElementById('styles')
+    };
+
+    run(async function () {
+      await new Promise(resolve =>
+        ReactDOM.render(
+          <ReactScrollToBottom.default
+            className="react-scroll-to-bottom"
+            followButtonClassName="follow"
+            scrollViewClassName="scrollable"
+            emotionOptions={additionalOptions}
+          >
+            {pageObjects.paragraphs.map(paragraph => (
+              <p key={paragraph}>{paragraph}</p>
+            ))}
+          </ReactScrollToBottom.default>,
+          document.getElementById('app'),
+          resolve
+        )
+      );
+
+      await pageObjects.scrollStabilizedAtBottom();
+
+      expect(document.getElementsByClassName('follow')[0]).toBeFalsy();
+
+      await pageObjects.mouseWheel(-100);
+
+      await pageObjects.scrollStabilized();
+
+      expect(document.getElementsByClassName('follow')[0]).toBeTruthy();
+      expect(document.getElementById('styles').childElementCount).toBeGreaterThan(0);
+    });
+  </script>
+</html>
diff --git a/__tests__/should-respect-options.js b/__tests__/should-respect-options.js
new file mode 100644
index 0000000..4daaad4
--- /dev/null
+++ b/__tests__/should-respect-options.js
@@ -0,0 +1,3 @@
+/** @jest-environment ./packages/test-harness/JestEnvironment */
+
+test('should-respect-options.html', () => runHTML('should-respect-options.html'));
diff --git a/packages/component/src/BasicScrollToBottom.js b/packages/component/src/BasicScrollToBottom.js
index 0db0547..06f79b4 100644
--- a/packages/component/src/BasicScrollToBottom.js
+++ b/packages/component/src/BasicScrollToBottom.js
@@ -42,6 +42,7 @@ const BasicScrollToBottom = ({
   className,
   debounce,
   debug,
+  emotionOptions,
   followButtonClassName,
   initialScrollBehavior,
   mode,
@@ -53,6 +54,7 @@ const BasicScrollToBottom = ({
     checkInterval={checkInterval}
     debounce={debounce}
     debug={debug}
+    emotionOptions={emotionOptions}
     initialScrollBehavior={initialScrollBehavior}
     mode={mode}
     nonce={nonce}
@@ -74,6 +76,7 @@ BasicScrollToBottom.defaultProps = {
   className: undefined,
   debounce: undefined,
   debug: undefined,
+  emotionOptions: undefined,
   followButtonClassName: undefined,
   initialScrollBehavior: 'smooth',
   mode: undefined,
@@ -88,6 +91,7 @@ BasicScrollToBottom.propTypes = {
   className: PropTypes.string,
   debounce: PropTypes.number,
   debug: PropTypes.bool,
+  emotionOptions: PropTypes.any,
   followButtonClassName: PropTypes.string,
   initialScrollBehavior: PropTypes.oneOf(['auto', 'smooth']),
   mode: PropTypes.oneOf(['bottom', 'top']),

From 51d47f358e73370b01a5ce2ec5a98bddb8b7eb66 Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Wed, 29 May 2024 18:34:10 +0000
Subject: [PATCH 03/14] Add back cache for default emotion objects

---
 .eslintrc.yml                                 |  3 +
 CHANGELOG.md                                  |  3 +
 .../component/src/ScrollToBottom/Composer.js  | 13 +----
 .../src/hooks/internal/useEmotion.js          | 58 +++++++++++++++++++
 packages/component/src/useEmotion.js          | 22 -------
 5 files changed, 66 insertions(+), 33 deletions(-)
 create mode 100644 packages/component/src/hooks/internal/useEmotion.js
 delete mode 100644 packages/component/src/useEmotion.js

diff --git a/.eslintrc.yml b/.eslintrc.yml
index 7a04aec..d80c8c8 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -5,6 +5,9 @@ parserOptions:
   ecmaVersion: 12
   sourceType: module
 
+env:
+  es6: true
+
 plugins:
   - prettier
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8dbd656..f3fcee2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+- Added support for passing additional options for internal Emotion instance via `emotionOptions` property, by [@OEvgeny]() in PR [](https://github.com/compulim/react-scroll-to-bottom/pull/)
+
 ## [4.2.0] - 2021-10-14
 
 ### Changed
diff --git a/packages/component/src/ScrollToBottom/Composer.js b/packages/component/src/ScrollToBottom/Composer.js
index 3939763..44ef1eb 100644
--- a/packages/component/src/ScrollToBottom/Composer.js
+++ b/packages/component/src/ScrollToBottom/Composer.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import createCSSKey from '../createCSSKey';
 import createDebug from '../utils/debug';
 import EventSpy from '../EventSpy';
 import FunctionContext from './FunctionContext';
@@ -11,7 +10,7 @@ import State1Context from './State1Context';
 import State2Context from './State2Context';
 import StateContext from './StateContext';
 import styleConsole from '../utils/styleConsole';
-import useEmotion from '../useEmotion';
+import useEmotion from '../hooks/internal/useEmotion';
 import useStateRef from '../hooks/internal/useStateRef';
 
 const DEFAULT_SCROLLER = () => Infinity;
@@ -498,15 +497,7 @@ const Composer = ({
     }
   }, [animateToRef, checkInterval, debug, mode, scrollToSticky, setSticky, stickyRef, target, targetRef]);
 
-  const emotionConfig = useMemo(
-    () => ({
-      key: 'react-scroll-to-bottom--css-' + createCSSKey(),
-      nonce,
-      ...emotionOptions
-    }),
-    [emotionOptions, nonce]
-  );
-  const emotion = useEmotion(emotionConfig);
+  const emotion = useEmotion(nonce, emotionOptions);
   const styleToClassName = useCallback(style => emotion.css(style) + '', [emotion]);
 
   const internalContext = useMemo(
diff --git a/packages/component/src/hooks/internal/useEmotion.js b/packages/component/src/hooks/internal/useEmotion.js
new file mode 100644
index 0000000..2d31bba
--- /dev/null
+++ b/packages/component/src/hooks/internal/useEmotion.js
@@ -0,0 +1,58 @@
+import createEmotion from '@emotion/css/create-instance';
+import { useEffect, useMemo, useRef } from 'react';
+
+import createCSSKey from '../../createCSSKey';
+
+const sharedEmotionByNonce = new Map();
+const sharedEmotionUsedTimes = new WeakMap();
+
+export default function useEmotion(nonce, emotionOptions) {
+  const emotion = useMemo(() => {
+    const defaultOptions = {
+      key: 'react-scroll-to-bottom--css-' + createCSSKey(),
+      nonce
+    };
+    if (emotionOptions) {
+      return createEmotion({
+        ...defaultOptions,
+        ...emotionOptions
+      });
+    }
+    const emotion = sharedEmotionByNonce.get(nonce) ?? createEmotion(defaultOptions);
+    sharedEmotionByNonce.set(nonce, emotion);
+    sharedEmotionUsedTimes.set(emotion, sharedEmotionUsedTimes.get(emotion) ?? 0 + 1);
+    return emotion;
+  }, [nonce, emotionOptions]);
+
+  const nonceRef = useRef();
+  nonceRef.current = nonce;
+
+  useEffect(
+    () =>
+      emotion &&
+      (() => {
+        if (sharedEmotionUsedTimes.has(emotion)) {
+          sharedEmotionUsedTimes.set(emotion, sharedEmotionUsedTimes.get(emotion) ?? 0 - 1);
+          if (sharedEmotionUsedTimes.get(emotion) > 0) {
+            return;
+          }
+        }
+
+        sharedEmotionUsedTimes.delete(emotion);
+
+        if (sharedEmotionByNonce.get(nonceRef.current) === emotion) {
+          sharedEmotionByNonce.delete(nonceRef.current);
+        }
+
+        const {
+          sheet: { container, tags }
+        } = emotion;
+        for (const child of tags) {
+          container.removeChild(child);
+        }
+      }),
+    [emotion]
+  );
+
+  return emotion;
+}
diff --git a/packages/component/src/useEmotion.js b/packages/component/src/useEmotion.js
deleted file mode 100644
index e5f496e..0000000
--- a/packages/component/src/useEmotion.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import createEmotion from '@emotion/css/create-instance';
-import { useEffect, useMemo } from 'react';
-
-export default function useEmotion(emotionOptions) {
-  const emotion = useMemo(() => createEmotion(emotionOptions), [emotionOptions]);
-
-  useEffect(
-    () =>
-      emotion &&
-      (() => {
-        const {
-          sheet: { container, tags }
-        } = emotion;
-        for (const child of tags) {
-          container.removeChild(child);
-        }
-      }),
-    [emotion]
-  );
-
-  return emotion;
-}

From efc9eb3a0392cb52a2192b0b41da1e4f2f9b4264 Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Wed, 29 May 2024 18:37:43 +0000
Subject: [PATCH 04/14] Changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3fcee2..2ecf750 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [Unreleased]
 
 ### Changed
-- Added support for passing additional options for internal Emotion instance via `emotionOptions` property, by [@OEvgeny]() in PR [](https://github.com/compulim/react-scroll-to-bottom/pull/)
+
+- Added support for passing additional options for internal Emotion instance via `emotionOptions` property, by [@OEvgeny](https://github.com/OEvgeny) in PR [#137](https://github.com/compulim/react-scroll-to-bottom/pull/137)
 
 ## [4.2.0] - 2021-10-14
 

From a69b5b042a36e1bc02c2c5371744c107f05db66d Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Wed, 29 May 2024 18:44:48 +0000
Subject: [PATCH 05/14] Wording

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ecf750..3f4728d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Changed
 
-- Added support for passing additional options for internal Emotion instance via `emotionOptions` property, by [@OEvgeny](https://github.com/OEvgeny) in PR [#137](https://github.com/compulim/react-scroll-to-bottom/pull/137)
+- Added support for passing additional options to internal Emotion instance via `emotionOptions` property, by [@OEvgeny](https://github.com/OEvgeny) in PR [#137](https://github.com/compulim/react-scroll-to-bottom/pull/137)
 
 ## [4.2.0] - 2021-10-14
 

From d750fb3f5f9fdb18dcb6b4ecc25833dc6bf2f2aa Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Wed, 29 May 2024 19:09:06 +0000
Subject: [PATCH 06/14] Cleanup

---
 packages/component/src/hooks/internal/useEmotion.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/component/src/hooks/internal/useEmotion.js b/packages/component/src/hooks/internal/useEmotion.js
index 2d31bba..660f41c 100644
--- a/packages/component/src/hooks/internal/useEmotion.js
+++ b/packages/component/src/hooks/internal/useEmotion.js
@@ -1,5 +1,5 @@
 import createEmotion from '@emotion/css/create-instance';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import createCSSKey from '../../createCSSKey';
 
@@ -24,9 +24,6 @@ export default function useEmotion(nonce, emotionOptions) {
     return emotion;
   }, [nonce, emotionOptions]);
 
-  const nonceRef = useRef();
-  nonceRef.current = nonce;
-
   useEffect(
     () =>
       emotion &&
@@ -40,8 +37,8 @@ export default function useEmotion(nonce, emotionOptions) {
 
         sharedEmotionUsedTimes.delete(emotion);
 
-        if (sharedEmotionByNonce.get(nonceRef.current) === emotion) {
-          sharedEmotionByNonce.delete(nonceRef.current);
+        if (emotion.nonce) {
+          sharedEmotionByNonce.delete(emotion.nonce);
         }
 
         const {

From 48aedd96c0d5cb53ee0dea1a8f0949bc2871c2f8 Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Thu, 30 May 2024 00:15:12 +0000
Subject: [PATCH 07/14] Rename to styleOptions

---
 CHANGELOG.md                                  |  2 +-
 README.md                                     | 26 +++++-----
 __tests__/should-respect-options.html         |  6 +--
 packages/component/src/BasicScrollToBottom.js | 14 +++---
 .../component/src/ScrollToBottom/Composer.js  | 14 +++---
 .../src/hooks/internal/useEmotion.js          | 48 +++++++------------
 6 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f4728d..4a92592 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Changed
 
-- Added support for passing additional options to internal Emotion instance via `emotionOptions` property, by [@OEvgeny](https://github.com/OEvgeny) in PR [#137](https://github.com/compulim/react-scroll-to-bottom/pull/137)
+- Added `styleOptions.stylesRoot` property which allows to specify a container node component styles are placed into, by [@OEvgeny](https://github.com/OEvgeny) in PR [#137](https://github.com/compulim/react-scroll-to-bottom/pull/137)
 
 ## [4.2.0] - 2021-10-14
 
diff --git a/README.md b/README.md
index 3a4e923..fff4ef0 100644
--- a/README.md
+++ b/README.md
@@ -62,19 +62,19 @@ export default props => (
 
 ## Props
 
-| Name                    | Type       | Default                      | Description                                                                                                                    |
-| ----------------------- | ---------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `checkInterval`         | `number`   | 150                          | Recurring interval of stickiness check, in milliseconds (minimum is 17 ms)                                                     |
-| `className`             | `string`   |                              | Set the class name for the root element                                                                                        |
-| `debounce`              | `number`   | `17`                         | Set the debounce for tracking the `onScroll` event                                                                             |
-| `debug`                 | `bool`     | `NODE_ENV === 'development'` | Show debug information in console                                                                                              |
-| `emotionOptions`        | `object`   | `undefined`                  | Additional options for the internal Emotion instance                                                                           |
-| `followButtonClassName` | `string`   |                              | Set the class name for the follow button                                                                                       |
-| `initialScrollBehavior` | `string`   | `smooth`                     | Set the initial scroll behavior, either `"auto"` (discrete scrolling) or `"smooth"`                                            |
-| `mode`                  | `string`   | `"bottom"`                   | Set it to `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top                                                           |
-| `nonce`                 | `string`   |                              | Set the nonce for [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) |
-| `scroller`              | `function` | `() => Infinity`             | A function to determine how far should scroll when scroll is needed                                                            |
-| `scrollViewClassName`   | `string`   |                              | Set the class name for the container element that house all `props.children`                                                   |
+| Name                      | Type       | Default                      | Description                                                                                                                    |
+| ------------------------- | ---------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `checkInterval`           | `number`   | 150                          | Recurring interval of stickiness check, in milliseconds (minimum is 17 ms)                                                     |
+| `className`               | `string`   |                              | Set the class name for the root element                                                                                        |
+| `debounce`                | `number`   | `17`                         | Set the debounce for tracking the `onScroll` event                                                                             |
+| `debug`                   | `bool`     | `NODE_ENV === 'development'` | Show debug information in console                                                                                              |
+| `followButtonClassName`   | `string`   |                              | Set the class name for the follow button                                                                                       |
+| `initialScrollBehavior`   | `string`   | `smooth`                     | Set the initial scroll behavior, either `"auto"` (discrete scrolling) or `"smooth"`                                            |
+| `mode`                    | `string`   | `"bottom"`                   | Set it to `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top                                                           |
+| `nonce`                   | `string`   |                              | Set the nonce for [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) |
+| `scroller`                | `function` | `() => Infinity`             | A function to determine how far should scroll when scroll is needed                                                            |
+| `scrollViewClassName`     | `string`   |                              | Set the class name for the container element that house all `props.children`                                                   |
+| `styleOptions.stylesRoot` | `Node`     | `undefined`                  | Set the container node for component styles to be placed into                                                                      |
 
 ## Hooks
 
diff --git a/__tests__/should-respect-options.html b/__tests__/should-respect-options.html
index d4ccab3..00f4f30 100644
--- a/__tests__/should-respect-options.html
+++ b/__tests__/should-respect-options.html
@@ -15,8 +15,8 @@
   <script type="text/babel" data-presets="react">
     'use strict';
 
-    const additionalOptions = {
-      container: document.getElementById('styles')
+    const styleOptions = {
+      stylesRoot: document.getElementById('styles')
     };
 
     run(async function () {
@@ -26,7 +26,7 @@
             className="react-scroll-to-bottom"
             followButtonClassName="follow"
             scrollViewClassName="scrollable"
-            emotionOptions={additionalOptions}
+            styleOptions={styleOptions}
           >
             {pageObjects.paragraphs.map(paragraph => (
               <p key={paragraph}>{paragraph}</p>
diff --git a/packages/component/src/BasicScrollToBottom.js b/packages/component/src/BasicScrollToBottom.js
index 06f79b4..ac0e29b 100644
--- a/packages/component/src/BasicScrollToBottom.js
+++ b/packages/component/src/BasicScrollToBottom.js
@@ -42,23 +42,23 @@ const BasicScrollToBottom = ({
   className,
   debounce,
   debug,
-  emotionOptions,
   followButtonClassName,
   initialScrollBehavior,
   mode,
   nonce,
   scroller,
-  scrollViewClassName
+  scrollViewClassName,
+  styleOptions
 }) => (
   <Composer
     checkInterval={checkInterval}
     debounce={debounce}
     debug={debug}
-    emotionOptions={emotionOptions}
     initialScrollBehavior={initialScrollBehavior}
     mode={mode}
     nonce={nonce}
     scroller={scroller}
+    styleOptions={styleOptions}
   >
     <BasicScrollToBottomCore
       className={className}
@@ -76,13 +76,13 @@ BasicScrollToBottom.defaultProps = {
   className: undefined,
   debounce: undefined,
   debug: undefined,
-  emotionOptions: undefined,
   followButtonClassName: undefined,
   initialScrollBehavior: 'smooth',
   mode: undefined,
   nonce: undefined,
   scroller: undefined,
-  scrollViewClassName: undefined
+  scrollViewClassName: undefined,
+  styleOptions: undefined
 };
 
 BasicScrollToBottom.propTypes = {
@@ -91,13 +91,13 @@ BasicScrollToBottom.propTypes = {
   className: PropTypes.string,
   debounce: PropTypes.number,
   debug: PropTypes.bool,
-  emotionOptions: PropTypes.any,
   followButtonClassName: PropTypes.string,
   initialScrollBehavior: PropTypes.oneOf(['auto', 'smooth']),
   mode: PropTypes.oneOf(['bottom', 'top']),
   nonce: PropTypes.string,
   scroller: PropTypes.func,
-  scrollViewClassName: PropTypes.string
+  scrollViewClassName: PropTypes.string,
+  styleOptions: PropTypes.any
 };
 
 export default BasicScrollToBottom;
diff --git a/packages/component/src/ScrollToBottom/Composer.js b/packages/component/src/ScrollToBottom/Composer.js
index 44ef1eb..920e788 100644
--- a/packages/component/src/ScrollToBottom/Composer.js
+++ b/packages/component/src/ScrollToBottom/Composer.js
@@ -50,11 +50,11 @@ const Composer = ({
   children,
   debounce,
   debug: debugFromProp,
-  emotionOptions,
   initialScrollBehavior,
   mode,
   nonce,
-  scroller
+  scroller,
+  styleOptions
 }) => {
   const debug = useMemo(() => createDebug(`<ScrollToBottom>`, { force: debugFromProp }), [debugFromProp]);
 
@@ -497,7 +497,7 @@ const Composer = ({
     }
   }, [animateToRef, checkInterval, debug, mode, scrollToSticky, setSticky, stickyRef, target, targetRef]);
 
-  const emotion = useEmotion(nonce, emotionOptions);
+  const emotion = useEmotion(nonce, styleOptions?.stylesRoot);
   const styleToClassName = useCallback(style => emotion.css(style) + '', [emotion]);
 
   const internalContext = useMemo(
@@ -614,11 +614,11 @@ Composer.defaultProps = {
   children: undefined,
   debounce: 17,
   debug: undefined,
-  emotionOptions: undefined,
   initialScrollBehavior: 'smooth',
   mode: undefined,
   nonce: undefined,
-  scroller: DEFAULT_SCROLLER
+  scroller: DEFAULT_SCROLLER,
+  styleOptions: undefined
 };
 
 Composer.propTypes = {
@@ -626,11 +626,11 @@ Composer.propTypes = {
   children: PropTypes.any,
   debounce: PropTypes.number,
   debug: PropTypes.bool,
-  emotionOptions: PropTypes.any,
   initialScrollBehavior: PropTypes.oneOf(['auto', 'smooth']),
   mode: PropTypes.oneOf(['bottom', 'top']),
   nonce: PropTypes.string,
-  scroller: PropTypes.func
+  scroller: PropTypes.func,
+  styleOptions: PropTypes.any
 };
 
 export default Composer;
diff --git a/packages/component/src/hooks/internal/useEmotion.js b/packages/component/src/hooks/internal/useEmotion.js
index 660f41c..db7faf3 100644
--- a/packages/component/src/hooks/internal/useEmotion.js
+++ b/packages/component/src/hooks/internal/useEmotion.js
@@ -3,47 +3,35 @@ import { useEffect, useMemo } from 'react';
 
 import createCSSKey from '../../createCSSKey';
 
-const sharedEmotionByNonce = new Map();
-const sharedEmotionUsedTimes = new WeakMap();
+const sharedEmotionInstances = [];
 
-export default function useEmotion(nonce, emotionOptions) {
+export default function useEmotion(nonce, container) {
   const emotion = useMemo(() => {
-    const defaultOptions = {
-      key: 'react-scroll-to-bottom--css-' + createCSSKey(),
-      nonce
-    };
-    if (emotionOptions) {
-      return createEmotion({
-        ...defaultOptions,
-        ...emotionOptions
-      });
-    }
-    const emotion = sharedEmotionByNonce.get(nonce) ?? createEmotion(defaultOptions);
-    sharedEmotionByNonce.set(nonce, emotion);
-    sharedEmotionUsedTimes.set(emotion, sharedEmotionUsedTimes.get(emotion) ?? 0 + 1);
+    const sharedEmotion = sharedEmotionInstances.find(
+      ({ sheet }) => sheet.nonce === nonce && sheet.container === container
+    );
+    const emotion = sharedEmotion ?? createEmotion({ key: createCSSKey(), nonce, container });
+
+    sharedEmotionInstances.push(emotion);
+
     return emotion;
-  }, [nonce, emotionOptions]);
+  }, [nonce, container]);
 
   useEffect(
     () =>
-      emotion &&
+      emotion?.sheet &&
       (() => {
-        if (sharedEmotionUsedTimes.has(emotion)) {
-          sharedEmotionUsedTimes.set(emotion, sharedEmotionUsedTimes.get(emotion) ?? 0 - 1);
-          if (sharedEmotionUsedTimes.get(emotion) > 0) {
-            return;
-          }
-        }
+        const { container, tags } = emotion.sheet;
 
-        sharedEmotionUsedTimes.delete(emotion);
+        const index = sharedEmotionInstances.lastIndexOf(emotion);
+        if (index >= 0) {
+          sharedEmotionInstances.splice(index, 1);
+        }
 
-        if (emotion.nonce) {
-          sharedEmotionByNonce.delete(emotion.nonce);
+        if (sharedEmotionInstances.includes(emotion)) {
+          return;
         }
 
-        const {
-          sheet: { container, tags }
-        } = emotion;
         for (const child of tags) {
           container.removeChild(child);
         }

From 37f8cdebb5e141dcad9f10b3aa7628b8d8fdf421 Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Thu, 30 May 2024 01:23:43 +0000
Subject: [PATCH 08/14] Add more tests

---
 .../should-respect-container-change.html      | 71 ++++++++++++++++++
 __tests__/should-respect-container-change.js  |  3 +
 __tests__/should-respect-nonce-change.html    | 73 +++++++++++++++++++
 __tests__/should-respect-nonce-change.js      |  3 +
 .../src/hooks/internal/useEmotion.js          |  3 +-
 5 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 __tests__/should-respect-container-change.html
 create mode 100644 __tests__/should-respect-container-change.js
 create mode 100644 __tests__/should-respect-nonce-change.html
 create mode 100644 __tests__/should-respect-nonce-change.js

diff --git a/__tests__/should-respect-container-change.html b/__tests__/should-respect-container-change.html
new file mode 100644
index 0000000..8aed07b
--- /dev/null
+++ b/__tests__/should-respect-container-change.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title></title>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="/react-scroll-to-bottom.development.js"></script>
+    <script src="/test-harness.js"></script>
+    <script src="/assets/page-object-model.js"></script>
+  </head>
+  <body>
+    <div id="styles-a"></div>
+    <div id="styles-b"></div>
+    <div id="app"></div>
+  </body>
+  <script type="text/babel" data-presets="react">
+    'use strict';
+
+    run(async function () {
+      let updateStylesRoot
+      const App = () => {
+        const [stylesRoot, setStylesRoot] = React.useState(document.getElementById('styles-a'));
+
+        let resolve, promise;
+        promise = new Promise(r => resolve = r);
+
+        React.useEffect(() => void requestIdleCallback(resolve), [promise]);
+        updateStylesRoot = root => {
+          setStylesRoot(root);
+          return promise;
+        }
+
+        return (
+          <ReactScrollToBottom.default
+            className="react-scroll-to-bottom"
+            followButtonClassName="follow"
+            scrollViewClassName="scrollable"
+            styleOptions={{ stylesRoot }}
+          >
+            {pageObjects.paragraphs.map(paragraph => (
+              <p key={paragraph}>{paragraph}</p>
+            ))}
+          </ReactScrollToBottom.default>
+        );
+      }
+      await new Promise(resolve =>
+        ReactDOM.render(
+          <App />,
+          document.getElementById('app'),
+          resolve
+        )
+      );
+
+      await pageObjects.scrollStabilizedAtBottom();
+
+      expect(document.getElementsByClassName('follow')[0]).toBeFalsy();
+
+      await pageObjects.mouseWheel(-100);
+
+      await pageObjects.scrollStabilized();
+
+      expect(document.getElementsByClassName('follow')[0]).toBeTruthy();
+      expect(document.getElementById('styles-a').childElementCount).toBeGreaterThan(0);
+
+      await updateStylesRoot(document.getElementById('styles-b'));
+
+      expect(document.getElementById('styles-a').childElementCount).toBe(0);
+      expect(document.getElementById('styles-b').childElementCount).toBeGreaterThan(0);
+    });
+  </script>
+</html>
diff --git a/__tests__/should-respect-container-change.js b/__tests__/should-respect-container-change.js
new file mode 100644
index 0000000..18c8092
--- /dev/null
+++ b/__tests__/should-respect-container-change.js
@@ -0,0 +1,3 @@
+/** @jest-environment ./packages/test-harness/JestEnvironment */
+
+test('should-respect-container-change.html', () => runHTML('should-respect-container-change.html'));
diff --git a/__tests__/should-respect-nonce-change.html b/__tests__/should-respect-nonce-change.html
new file mode 100644
index 0000000..26ce08b
--- /dev/null
+++ b/__tests__/should-respect-nonce-change.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title></title>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="/react-scroll-to-bottom.development.js"></script>
+    <script src="/test-harness.js"></script>
+    <script src="/assets/page-object-model.js"></script>
+  </head>
+  <body>
+    <div id="styles-a"></div>
+    <div id="styles-b"></div>
+    <div id="app"></div>
+  </body>
+  <script type="text/babel" data-presets="react">
+    'use strict';
+
+    run(async function () {
+      let updateNonce
+      const App = () => {
+        const [nonce, setNonce] = React.useState('old-nonce');
+
+        let resolve, promise;
+        promise = new Promise(r => resolve = r);
+
+        React.useEffect(() => void requestIdleCallback(resolve), [promise]);
+        updateNonce = root => {
+          setNonce(root);
+          return promise;
+        }
+
+        return (
+          <ReactScrollToBottom.default
+            className="react-scroll-to-bottom"
+            followButtonClassName="follow"
+            nonce={nonce}
+            scrollViewClassName="scrollable"
+          >
+            {pageObjects.paragraphs.map(paragraph => (
+              <p key={paragraph}>{paragraph}</p>
+            ))}
+          </ReactScrollToBottom.default>
+        );
+      }
+      await new Promise(resolve =>
+        ReactDOM.render(
+          <App />,
+          document.getElementById('app'),
+          resolve
+        )
+      );
+
+      await pageObjects.scrollStabilizedAtBottom();
+
+      expect(document.getElementsByClassName('follow')[0]).toBeFalsy();
+
+      await pageObjects.mouseWheel(-100);
+
+      await pageObjects.scrollStabilized();
+
+      const emotionStyle = document.querySelector('[data-emotion]')
+
+      expect(document.getElementsByClassName('follow')[0]).toBeTruthy();
+      expect(emotionStyle).toBeDefined();
+
+      await updateNonce('new-nonce');
+
+      expect(document.querySelector('[data-emotion]')).not.toEqual(emotionStyle);
+      expect(document.querySelectorAll('[data-emotion]').length).toEqual(1);
+    });
+  </script>
+</html>
diff --git a/__tests__/should-respect-nonce-change.js b/__tests__/should-respect-nonce-change.js
new file mode 100644
index 0000000..3968d44
--- /dev/null
+++ b/__tests__/should-respect-nonce-change.js
@@ -0,0 +1,3 @@
+/** @jest-environment ./packages/test-harness/JestEnvironment */
+
+test('should-respect-nonce-change.html', () => runHTML('should-respect-nonce-change.html'));
diff --git a/packages/component/src/hooks/internal/useEmotion.js b/packages/component/src/hooks/internal/useEmotion.js
index db7faf3..b5f4ee1 100644
--- a/packages/component/src/hooks/internal/useEmotion.js
+++ b/packages/component/src/hooks/internal/useEmotion.js
@@ -10,7 +10,8 @@ export default function useEmotion(nonce, container) {
     const sharedEmotion = sharedEmotionInstances.find(
       ({ sheet }) => sheet.nonce === nonce && sheet.container === container
     );
-    const emotion = sharedEmotion ?? createEmotion({ key: createCSSKey(), nonce, container });
+    const emotion =
+      sharedEmotion ?? createEmotion({ key: `react-scroll-to-bottom--css-${createCSSKey()}`, nonce, container });
 
     sharedEmotionInstances.push(emotion);
 

From f9340b6593b391ada2bf3ab3391750f9ce04d1cb Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Thu, 30 May 2024 16:09:36 +0000
Subject: [PATCH 09/14] Fix tests

---
 __tests__/should-respect-container-change.html | 2 +-
 __tests__/should-respect-nonce-change.html     | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/__tests__/should-respect-container-change.html b/__tests__/should-respect-container-change.html
index 8aed07b..d38bd54 100644
--- a/__tests__/should-respect-container-change.html
+++ b/__tests__/should-respect-container-change.html
@@ -24,7 +24,7 @@
         let resolve, promise;
         promise = new Promise(r => resolve = r);
 
-        React.useEffect(() => void requestIdleCallback(resolve), [promise]);
+        React.useEffect(() => () => requestIdleCallback(resolve));
         updateStylesRoot = root => {
           setStylesRoot(root);
           return promise;
diff --git a/__tests__/should-respect-nonce-change.html b/__tests__/should-respect-nonce-change.html
index 26ce08b..5edd5e2 100644
--- a/__tests__/should-respect-nonce-change.html
+++ b/__tests__/should-respect-nonce-change.html
@@ -24,7 +24,7 @@
         let resolve, promise;
         promise = new Promise(r => resolve = r);
 
-        React.useEffect(() => void requestIdleCallback(resolve), [promise]);
+        React.useEffect(() => () => requestIdleCallback(resolve));
         updateNonce = root => {
           setNonce(root);
           return promise;
@@ -60,6 +60,7 @@
       await pageObjects.scrollStabilized();
 
       const emotionStyle = document.querySelector('[data-emotion]')
+      const stylesCount = document.querySelectorAll('[data-emotion]').length;
 
       expect(document.getElementsByClassName('follow')[0]).toBeTruthy();
       expect(emotionStyle).toBeDefined();
@@ -67,7 +68,7 @@
       await updateNonce('new-nonce');
 
       expect(document.querySelector('[data-emotion]')).not.toEqual(emotionStyle);
-      expect(document.querySelectorAll('[data-emotion]').length).toEqual(1);
+      expect(document.querySelectorAll('[data-emotion]').length).toBe(stylesCount);
     });
   </script>
 </html>

From c8a8d542952e027008f04deb3e6a4e06dd84d258 Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Thu, 30 May 2024 16:20:11 +0000
Subject: [PATCH 10/14] Apply suggestions from code review

Self review
---
 CHANGELOG.md                                   | 2 +-
 __tests__/should-respect-container-change.html | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a92592..b53a041 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Changed
 
-- Added `styleOptions.stylesRoot` property which allows to specify a container node component styles are placed into, by [@OEvgeny](https://github.com/OEvgeny) in PR [#137](https://github.com/compulim/react-scroll-to-bottom/pull/137)
+- Added `styleOptions.stylesRoot` property which allows to specify a container node component styles will be placed into, by [@OEvgeny](https://github.com/OEvgeny) in PR [#137](https://github.com/compulim/react-scroll-to-bottom/pull/137)
 
 ## [4.2.0] - 2021-10-14
 
diff --git a/__tests__/should-respect-container-change.html b/__tests__/should-respect-container-change.html
index d38bd54..4133053 100644
--- a/__tests__/should-respect-container-change.html
+++ b/__tests__/should-respect-container-change.html
@@ -61,6 +61,7 @@
 
       expect(document.getElementsByClassName('follow')[0]).toBeTruthy();
       expect(document.getElementById('styles-a').childElementCount).toBeGreaterThan(0);
+      expect(document.getElementById('styles-b').childElementCount).toBe(0);
 
       await updateStylesRoot(document.getElementById('styles-b'));
 

From 2d0ae79ae618d3e43dc506b930fec173b7099450 Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Thu, 30 May 2024 19:43:28 +0000
Subject: [PATCH 11/14] Address suggestions

---
 README.md                                     |  2 +-
 __tests__/should-respect-nonce-change.html    |  1 +
 .../src/hooks/internal/useEmotion.js          | 21 ++++++++-----------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index fff4ef0..f41f3c5 100644
--- a/README.md
+++ b/README.md
@@ -74,7 +74,7 @@ export default props => (
 | `nonce`                   | `string`   |                              | Set the nonce for [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) |
 | `scroller`                | `function` | `() => Infinity`             | A function to determine how far should scroll when scroll is needed                                                            |
 | `scrollViewClassName`     | `string`   |                              | Set the class name for the container element that house all `props.children`                                                   |
-| `styleOptions.stylesRoot` | `Node`     | `undefined`                  | Set the container node for component styles to be placed into                                                                      |
+| `styleOptions.stylesRoot` | `Node`     | `undefined`                  | Set the container node for component styles to be placed into. When set to `undefined`, will create a new container |
 
 ## Hooks
 
diff --git a/__tests__/should-respect-nonce-change.html b/__tests__/should-respect-nonce-change.html
index 5edd5e2..3bdf80a 100644
--- a/__tests__/should-respect-nonce-change.html
+++ b/__tests__/should-respect-nonce-change.html
@@ -68,6 +68,7 @@
       await updateNonce('new-nonce');
 
       expect(document.querySelector('[data-emotion]')).not.toEqual(emotionStyle);
+      expect(emotionStyle.parentElement).toBe(undefined);
       expect(document.querySelectorAll('[data-emotion]').length).toBe(stylesCount);
     });
   </script>
diff --git a/packages/component/src/hooks/internal/useEmotion.js b/packages/component/src/hooks/internal/useEmotion.js
index b5f4ee1..1f10a77 100644
--- a/packages/component/src/hooks/internal/useEmotion.js
+++ b/packages/component/src/hooks/internal/useEmotion.js
@@ -11,30 +11,27 @@ export default function useEmotion(nonce, container) {
       ({ sheet }) => sheet.nonce === nonce && sheet.container === container
     );
     const emotion =
-      sharedEmotion ?? createEmotion({ key: `react-scroll-to-bottom--css-${createCSSKey()}`, nonce, container });
+      sharedEmotion ?? createEmotion({ container, key: `react-scroll-to-bottom--css-${createCSSKey()}`, nonce });
 
     sharedEmotionInstances.push(emotion);
 
     return emotion;
-  }, [nonce, container]);
+  }, [container, nonce]);
 
   useEffect(
     () =>
       emotion?.sheet &&
       (() => {
-        const { container, tags } = emotion.sheet;
-
         const index = sharedEmotionInstances.lastIndexOf(emotion);
-        if (index >= 0) {
-          sharedEmotionInstances.splice(index, 1);
-        }
 
-        if (sharedEmotionInstances.includes(emotion)) {
-          return;
-        }
+        // Reduce ref count for the specific emotion instance.
+        ~index && sharedEmotionInstances.splice(index, 1);
 
-        for (const child of tags) {
-          container.removeChild(child);
+        if (!sharedEmotionInstances.includes(emotion)) {
+          // No more hooks use this emotion object, we can clean up the container for stuff we added.
+          for (const child of emotion.sheet.tags) {
+            child.remove();
+          }
         }
       }),
     [emotion]

From da4516eecbc818df5bdcbab7667e7a5a45c4a2a8 Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Thu, 30 May 2024 19:51:58 +0000
Subject: [PATCH 12/14] Fix test

---
 __tests__/should-respect-nonce-change.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/__tests__/should-respect-nonce-change.html b/__tests__/should-respect-nonce-change.html
index 3bdf80a..a912d84 100644
--- a/__tests__/should-respect-nonce-change.html
+++ b/__tests__/should-respect-nonce-change.html
@@ -68,7 +68,7 @@
       await updateNonce('new-nonce');
 
       expect(document.querySelector('[data-emotion]')).not.toEqual(emotionStyle);
-      expect(emotionStyle.parentElement).toBe(undefined);
+      expect(emotionStyle.parentElement).toBe(null);
       expect(document.querySelectorAll('[data-emotion]').length).toBe(stylesCount);
     });
   </script>

From 7b831d01e6c053f0b8bab4e174b4d4d7d8418402 Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Thu, 30 May 2024 19:54:28 +0000
Subject: [PATCH 13/14] Fix docs

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f41f3c5..0f5da40 100644
--- a/README.md
+++ b/README.md
@@ -74,7 +74,7 @@ export default props => (
 | `nonce`                   | `string`   |                              | Set the nonce for [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) |
 | `scroller`                | `function` | `() => Infinity`             | A function to determine how far should scroll when scroll is needed                                                            |
 | `scrollViewClassName`     | `string`   |                              | Set the class name for the container element that house all `props.children`                                                   |
-| `styleOptions.stylesRoot` | `Node`     | `undefined`                  | Set the container node for component styles to be placed into. When set to `undefined`, will create a new container |
+| `styleOptions.stylesRoot` | `Node`     | `undefined`                  | Set the container node for component styles to be placed into. When set to `undefined`, will use `document.head` |
 
 ## Hooks
 

From e762b5b1005bf6ec451f3f475c9c8fd75c42e30f Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Thu, 30 May 2024 19:55:54 +0000
Subject: [PATCH 14/14] Fix table markup

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0f5da40..80220cf 100644
--- a/README.md
+++ b/README.md
@@ -74,7 +74,7 @@ export default props => (
 | `nonce`                   | `string`   |                              | Set the nonce for [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) |
 | `scroller`                | `function` | `() => Infinity`             | A function to determine how far should scroll when scroll is needed                                                            |
 | `scrollViewClassName`     | `string`   |                              | Set the class name for the container element that house all `props.children`                                                   |
-| `styleOptions.stylesRoot` | `Node`     | `undefined`                  | Set the container node for component styles to be placed into. When set to `undefined`, will use `document.head` |
+| `styleOptions.stylesRoot` | `Node`     | `undefined`                  | Set the container node for component styles to be placed into. When set to `undefined`, will use `document.head`               |
 
 ## Hooks