styled component global class strategy

Question

What's the best or elegant strategy to use a global class using styled-components? I can create a component and style it, import it when I need it. For instance

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

Is there any npm package or helper utils I can already use? or there's other better way to do it?

Answer 1

When you have a repeated style you want to reuse, typically you define a mixins file and import the css blocks:

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

You can see "real world" example here (some paid project I work on).