@organicss/styled-components v1.1.0

Styled Components

The OrganiCSS Styled Components package provides a collection of TypeScript-ready functions to support writing progressively-enhanced logical CSS with Styled Components. The mixins will generate logical CSS properties first, with fallbacks to catch when not supported.

:robot: Installation

To use OrganiCSS Styled Components, first install the package into a Styled Components project.

npm i @organicss/styled-components

yarn add @organicss/styled-components

:rocket: Getting Started

Get started using OrganiCSS Styled Components by importing a mixin and calling it from inside of a Styled Components style block.

import { Margin, Padding } from '@organicss/styled-components';

const Container = styled.section`
    ${Margin({ inline: 'auto' })};
    ${Padding({ block: 'var(--custom-property-value)' })};
    // ...any addition styles
`;

Using with CSS Custom Properties

import { Margin } from '@organicss/styled-components';

const Container = styled.section`
    ${Margin({ block: 'var(--space-lg)', inline: 'calc(var(--space-lg) * 2)' })};
`;

Using with Styled Components Props

import { Margin } from '@organicss/styled-components';

return <Container $margin="var(--space-lg)">...</Container>;

const Container = styled.section`
    ${({ $margin }) => Margin({ all: $margin })};
`;

:book: Documentation

Border

import { Border } from '@organicss/styled-components';

Border Radius

import { BorderRadius } from '@organicss/styled-components';

Layout

import { Layout } from '@organicss/styled-components';

Margin

import { Margin } from '@organicss/styled-components';

Padding

import { Padding } from '@organicss/styled-components';

Position

import { Position } from '@organicss/styled-components';