我正在处理一个React项目（react@18.2.0，styled-components@5.1.1），该项目已经设置为使用styled-components，以便从common/styled.js文件导出常用组件，但这会导致大量无效钩子调用错误。
现在，它看起来像这样：

export const ExampleButton = styled.button`
  color: white;
`;

然后将这些样式化的组件导入到需要的位置，如下所示：

import { ExampleButton, SomeComponent, AnotherComponent } from '../common.styled';

我知道无效的钩子调用是由这个导出/导入设置引起的，因为当我从common/styled.js中删除一个特定样式的组件并将其粘贴到需要它的任何地方时，该组件的错误消息就会消失，因此：

import { ExampleButton } from '../common.styled';

const ExampleComponent = () => {
  return (
    <div>
       <ExampleButton>Hello</ExampleButton>
    </div>
  );
};

我这样做：

import styled from 'styled-components';

const ExampleComponent = () => {
  const ExampleButton = styled.button`
    color: white;
  `;

  return (
    <div>
      <ExampleButton>Hello</ExampleButton>
    </div>
  );
};

这样做是可行的，但这不是一个真正可行的解决方案，因为我必须在所有地方粘贴相同的代码，而不仅仅是ExampleComponent，对整个项目这样做会导致大量的代码重复。
在不违反钩子规则的情况下，创建类似于common/styled.js的解决方案的正确方法是什么？