I need to add global styling option for my react component library. I have added global style as shown below

import { createGlobalStyle } from 'styled-components';

export const  GlobalStyle = createGlobalStyle`

  button{
    color: white;
    background-color: green;
  }
`;

and I have exported the component so that app consuming the my-ui-libray can use it

export * from './GlobalStyle.js'

And I have used the global style as following in a react app

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>
);

The issue is the CSS Styles are not applied to the button in the react app which is using my library. Is there any issue in my above code? Or is there a better way to achieve the same?

Note:

Global style work when the component in used in react Storybook as shown in following code, but once I build and use the library in the react app it does not work.

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

Reference: (Add global styles section)

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