Javascript 提取的样式与样式化组件的循环依赖关系

我对样式化组件相当陌生，并尝试提取/重构样式以分离文件。我对循环依赖性有问题——可能是因为缺乏样式化组件良好实践方面的经验。 情况就是这样：

// 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.js
从“./styles”导入{StyledA}；
导出默认值（）=>(
);
//B.js
从“./styles”导入{StyledA1}；
导出默认值（）=>(
);
//styles.js
从“样式化组件”导入样式化；
从“/A.js”导入文件；
export const StyledA=styled.div`……`；
export const StyledA1=styled（A）`…`；//导致依赖循环错误

我试图实现的是扩展

A

组件样式并保留其子组件（对于文件

B.js

）

• export const StyledA1=styled（StyledA）

  无法工作，因为我丢失了组件

  A

  结构
• …和导入

  styles.js中的
  A
  会由于导入
  A.js而导致eslint“依赖循环”错误→ styles.js→ A.js

---

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

在JS中使用CSS时（如

样式化组件

），您通常将

样式

生成的组件保存在同一个文件中

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;

那么如何导出JS构造函数中使用CSS生成的

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;

完全使用：

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

import A from./components/A'；
从“样式化组件”导入样式化；
从“./components/styles”导入{border}；
const StyledA=styled（A）`
背景色：淡紫色；
`;
const StyledASelector=styled.div`
${A.className}{
背景颜色：淡绿色；
保证金：5px；
${border}
}
`;
常量应用=（）=>{
返回(
首先，你能在a中重现错误吗？其次，如果你想以这种方式重复使用样式，这不是一种好的做法，如果你有具体的问题要解决并寻求建议，请解释并举例说明。好吧，在沙盒中，这种“依赖循环”错误没有出现，一切正常-可能是因为标准的eslint配置（我的项目使用
Airbnb
config）。无论如何，这是您可以看到的.In
components/B.js
文件（注释掉）在将样式提取到单独的文件之前进行编码。我将添加一个好的实践示例的答案，您永远不会导出
样式化的组件，将其视为一个解决方案，而不是尝试解决此特定问题。之前，我在同一个JS文件中使用了大多数样式，但我听说这是一个将所有内容保持在一起的糟糕实践.我发现了这个，并开始提取样式-我依赖于，其中样式化的组件位于单独的样式文件中。那么，该回购协议如何？React中的所有内容都是有意见的，没有标准，这是我第一次在spectrum回购中看到这样的示例。选择10个高评级回购协议并检查他们的意见。此外，这也是我第一次看到co500行的组件，如本回购协议中所示。