带有样式组件的提取样式的循环依赖

Question

我对 styled-components 还很陌生，并尝试将样式提取/重构到单独的文件中。我有循环依赖的问题 - 可能是因为缺乏样式组件良好实践的经验。 情况是这样的：

// A.js
import { StyledA } from './styles';

export default () => (
  <StyledA>
    <SomeOtherComponent />
  </StyledA>
);

// B.js
import { StyledA1 } from './styles';

export default () => (
   <SomeWrapperComponent>
     <StyledA1 />
   </SomeWrapperComponent>
);

// styles.js
import styled from 'styled-components';
import A from './A.js';

export const StyledA = styled.div`...`;
export const StyledA1 = styled(A)`...`; // causes dependency circle error

我想要实现的是扩展 A 组件样式并保留它的子组件（对于文件 B.js）。

• export const StyledA1 = styled(StyledA) 不起作用，因为我丢失了组件 A 结构。
• ...并在styles.js 中导入A 会因为导入A.js → styles.js → A.js 而导致eslint“依赖周期”错误。

如何保持扩展组件的 HTML 结构并解决依赖周期问题？

Answer 1

使用 CSS-in-JS（如 styled-components）时，您通常会将 style 生成的组件保存在同一个文件中。

那么如何导出使用 CSS-in-JS 构造函数生成的className？通过使用复合组件。

export const StyledA = styled.div`
  background: red;
  font-size: 20px;
`;

const A = ({ className }) => (
  <StyledA className={className}>
    <div>Display me always!</div>
  </StyledA>
);

// Can use any naming here
A.className = StyledA;

export default A;

此外，当您想重用样式时，您可以创建类似 styles.js 的文件并声明可重用的 css 块：

import { css } from 'styled-components';

const border = css`
  border: 2px black solid;
`;

export { border };

完全使用：

import A from './components/A';
import styled from 'styled-components';
import { border } from './components/styles';

const StyledA = styled(A)`
  background-color: palevioletred;
`;

const StyledASelector = styled.div`
  ${A.className} {
    background-color: paleturquoise;
    margin: 5px;
    ${border}
  }
`;

const App = () => {
  return (
    <>
      <A />
      <StyledA />
      <StyledASelector>
        <A />
      </StyledASelector>
    </>
  );
};