@chakra-ui/styled-system

What is @chakra-ui/styled-system?

@chakra-ui/styled-system is a utility-first CSS-in-JS framework that allows you to style your components using a theme-based approach. It provides a set of functions and utilities to create consistent, theme-aware styles for your React components.

What are @chakra-ui/styled-system's main functionalities?

Theme-based Styling

This feature allows you to use a theme object to define consistent styles across your application. The `css` function takes a style object and applies the theme values.

import { theme, css } from '@chakra-ui/styled-system';

const styles = css({
  color: 'primary',
  fontSize: 'lg',
})(theme);

Responsive Styles

You can define responsive styles using arrays. The `css` function will apply the styles based on the breakpoints defined in your theme.

import { css } from '@chakra-ui/styled-system';

const responsiveStyles = css({
  fontSize: ['sm', 'md', 'lg'],
  padding: [2, 4, 6],
});

Utility Functions

Utility functions like `margin` and `padding` allow you to apply spacing and other styles easily. These functions help in creating consistent spacing and layout.

import { margin, padding } from '@chakra-ui/styled-system';

const boxStyles = {
  ...margin(4),
  ...padding(2),
};

Other packages similar to @chakra-ui/styled-system

styled-components

styled-components is a popular CSS-in-JS library that allows you to write plain CSS in your JavaScript. It provides a way to style your components using tagged template literals. Unlike @chakra-ui/styled-system, it does not come with a built-in theme system but allows you to create your own.

emotion

Emotion is another CSS-in-JS library that offers both string and object styles. It provides a powerful and flexible way to style your components. Emotion has a similar approach to @chakra-ui/styled-system but offers more flexibility in terms of styling methods.

tailwindcss

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. Unlike @chakra-ui/styled-system, which is a CSS-in-JS solution, Tailwind CSS is a traditional CSS framework that you can use with any front-end library or framework.

README

@chakra-ui/styled-system

The framework agnostic styling engine for Chakra UI. It's used in the system package.

Installation

npm i @chakra-ui/styled-system

# or

yarn add @chakra-ui/styled-system

CSS Logical Properties

Chakra UI provides pretty good support for bi-directional (bidi) CSS properties. For our shorthand props, we provide a *Bidi suffix to manage the rtl/ltr switching.

import { css } from "@chakra-ui/styled-system"

const theme = {
  direction: "rtl", // ltr | rtl
}

const styles = css({
  mt: "40px",
  // bi-directional `margin-right`
  // `margin-right` in ltr, `margin-left` in rtl
  mrBidi: "30px",
})(theme)

References

const cssLogicalValueMap = {
  float: { left: "inline-start", right: "inline-end" },
  clear: { left: "inline-start", right: "inline-end" },
  resize: { horizontal: "block", vertical: "inline" },
  textAlign: { left: "start", right: "end" },
  captionSize: { top: "block-start", bottom: "block-end" },
}

const cssLogicalPropertiesMap = {
  // Margin and Padding Logical Properties
  "marginTop|mt": "marginBlockStart",
  "marginLeft|ml": "marginInlineStart",
  "marginRight|mr": "marginInlineEnd",
  "marginBottom|mb": "marginBlockEnd",
  "paddingTop|pt": "paddingBlockStart",
  "paddingBottom|pb": "paddingBlockEnd",
  "paddingLeft|pl": "paddingInlineStart",
  "paddingRight|pr": "paddingInlineEnd",
  "marginY|my": "marginBlock",
  "marginX|mx": "marginInline",
  "paddingY|py": "paddingBlock",
  "paddingX|px": "paddingInline",

  // Floating and positioning logical properties
  top: "insetBlockStart",
  bottom: "insetBlockEnd",
  left: "insetInlineStart",
  right: "insetInlineEnd",

  // Sizing Logical properties
  "width|w": "inlineSize",
  "minW|minWidth": "minInlineSize",
  "maxW|maxWidth": "maxInlineSize",
  "height|h": "blockSize",
  "minH|minHeight": "minBlockSize",
  "maxH|maxHeight": "maxBlockSize",

  // Border logical properties
  borderY: "borderBlock",
  borderX: "borderInline",

  borderTop: "borderBlockStart",
  borderTopWidth: "borderBlockStartWidth",
  borderTopStyle: "borderBlockStartStyle",
  borderTopColor: "borderBlockStartColor",

  borderBottom: "borderBlockEnd",
  borderBottomWidth: "borderBlockEndWidth",
  borderBottomStyle: "borderBlockEndStyle",
  borderBottomColor: "borderBlockEndColor",

  borderLeft: "borderInlineStart",
  borderLeftWidth: "borderInlineStartWidth",
  borderLeftStyle: "borderInlineStartStyle",
  borderLeftColor: "borderInlineStartColor",

  borderRight: "borderInlineEnd",
  borderRightWidth: "borderInlineEndWidth",
  borderRightStyle: "borderInlineEndStyle",
  borderRightColor: "borderInlineEndColor",
}