样式化组件全局类策略

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（我正在从事的一些付费项目。

Answer 2

您不需要将孩子当作道具就可以通过：

//CenterStyled.js
import styled from 'styled-components';

export const CenterStyledA = styled.div`
   align-item: center;
   display: flex;
`

export const CenterStyledB = styled.div`
   align-item: center;
   display: flex;
`

并像]一样使用它>

// any other file
import { CenterStyledA, CenterStyledB } from 'path/CenterStyled.js';

<CenterStyledA> 
  <h1> hello </h2>
</CenterStyledA>