我对样式化组件还很陌生,并尝试提取/重构样式以分离文件。我对循环依赖有疑问-可能是由于缺乏样式化组件良好实践的经验。这种情况:
// 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
结构。A
而在styles.js
中导入A.js → styles.js → A.js
导致eslint“依赖周期”错误。我应该怎么做才能保留扩展组件的HTML结构并解决依赖周期问题?
[使用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>
</>
);
};