Question

使用带样式组件的全局类的最佳策略是什么？我可以创建一个组件并设置其样式，然后在需要时将其导入。例如

const CenterStyled = styled.div`
   align-item: center;
   display: flex;
`
export default const Center = ({children}) => <CenterStyled>{children}</Center>

我已经可以使用任何npm软件包或辅助工具吗？还是还有其他更好的方法呢？

Answer 1

当您要重复使用样式时，通常需要定义一个mixins文件并导入css块：

// mixins.js
import { css } from "styled-components";

const flexAlignCenter = css`
  align-items: center;
  display: flex;
`;
const flexAlignStart = css`
  ${flexAlignCenter}
  align-items: flex-start;
`;

const mixins = { flexAlignCenter, flexAlignStart };
export default mixins;

// Usage
import { mixins } from '@styles'; // Some styles alias
const Container = styled.div`
  ${mixins.flexAlignCenter}
`;
const Component = ({ children }) => <Container>{children}</Container>;

您可以看到"real world" example here（我正在从事的一些付费项目）。

样式组件全局类策略

1 个答案: