feat(theme): allow styling themeprovider like box (#3739)

* feat(theme): allow passing inline `style` prop for overrides

* fix: a11y story error

.changeset/khaki-doors-cheer.md

@@ -0,0 +1,9 @@
+---
+"@twilio-paste/customization": minor
+"@twilio-paste/theme": minor
+"@twilio-paste/core": minor
+---
+
+[ThemeProvider, CustomizationProvider] Now accepts an optional `style` prop to override element styles.
+
+This is helpful in scenarios where ThemeProvider isn't wrapping your app root, but instead is nested in your DOM tree and needs some styling overrides.

packages/paste-customization/src/types/CustomizationProvider.ts

@@ -43,4 +43,5 @@ export interface CustomizationProviderProps {
    * @memberof CustomizationProviderProps
    */
   theme?: Partial<GenericThemeShape>;
+  style?: React.CSSProperties;
 }

packages/paste-theme/src/themeProvider.tsx

@@ -78,6 +78,7 @@ export interface ThemeProviderProps {
   theme?: ThemeVariants;
   disableAnimations?: boolean;
   cacheProviderProps?: CreateCacheOptions;
+  style?: React.CSSProperties;
 }
 
 const ThemeProvider: React.FunctionComponent<React.PropsWithChildren<ThemeProviderProps>> = ({

packages/paste-theme/stories/themeProvider.stories.tsx

@@ -68,3 +68,16 @@ export const JapaneseFontFamily = (): JSX.Element => (
     </Box>
   </>
 );
+
+export const StylingThemeProviderElement = (): React.ReactNode => (
+  <ThemeProvider theme="twilio" style={{ width: "100px", overflow: "auto" }}>
+    <Paragraph>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Nisi porta lorem mollis aliquam ut porttitor leo. Hendrerit gravida rutrum quisque non. A arcu
+      cursus vitae congue mauris rhoncus aenean vel elit. Tortor dignissim convallis aenean et tortor at risus.
+      Vestibulum lorem sed risus ultricies. Tempor nec feugiat nisl pretium fusce id. Morbi tempus iaculis urna id
+      volutpat lacus laoreet non curabitur. In ante metus dictum at. Sit amet risus nullam eget felis eget nunc
+      lobortis.
+    </Paragraph>
+  </ThemeProvider>
+);