提取的 styles 的循環依賴與樣式組件

Question

我對樣式組件相當陌生，並試圖提取/重構 styles 以分離文件。 我有循環依賴的問題 - 可能是因為缺乏樣式組件良好實踐的經驗。 這是這種情況：

// 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組件 styles 並保留它的子組件（對於文件B.js ）。

• export const StyledA1 = styled(StyledA)不起作用，因為我丟失了組件A結構。
• ...並在 styles.js 中導入A由於導入A.js → styles.js → A.js styles.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時，您可以創建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>
    </>
  );
};