глобальная классовая стратегия в стиле компонента

Question

Какова лучшая или изящная стратегия использования глобального класса с использованием styled-компонентов? Я могу создать компонент и стилизовать его, импортировать, когда мне это нужно. Например,

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

Вы можете видеть Пример "реального мира" здесь (какой-то платный проект, над которым я работаю).