Necesito agregar una opción de estilo global para mi biblioteca de componentes de reacción. He agregado un estilo global como se muestra a continuación

 import { createGlobalStyle } from 'styled-components'; export const GlobalStyle = createGlobalStyle` button{ color: white; background-color: green; } `;

y he exportado el componente para que la aplicación que consume my-ui-libray pueda usarlo

 export * from './GlobalStyle.js'

Y he usado el estilo global de la siguiente manera en una aplicación de reacción.

 import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { GlobalStyle } from 'my-ui-libray'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <GlobalStyle/> <App /> </React.StrictMode> );

El problema es que los estilos CSS no se aplican al botón en la aplicación de reacción que está usando mi biblioteca. ¿Hay algún problema en mi código anterior? ¿O hay una mejor manera de lograr lo mismo?

Nota:

El estilo global funciona cuando el componente se usa en React Storybook como se muestra en el siguiente código, pero una vez que construyo y uso la biblioteca en la aplicación React, no funciona.

 const Template = (args) => <><GlobalStyle /><Button {...args} /></>;

Referencia: (Agregar sección de estilos globales)

https://storybook.js.org/tutorials/design-systems-for-developers/react/en/build/