In most projects you might find yourself repeating specific text properties (font size, font weight, line height) or layer properties (bg, color, shadow). This can be painful as your project grows in size.
layerStyle props can help you keep things organized and
Layer Styles allow you to save a combination of styling attributes to re-use in
other components. Once created, pass the
layerStyle prop to any component and
chakra will resolve the styles accordingly.
Properties defined in a layer style
Typography forms the core of any product just as much as colors and components do. As a result, you'll need to establish styles for consistent, legible typography early in the process of creating your product or design system.
The text styles functionality in Chakra makes it easy to repeatably apply a collection of text properties (like line height and size) to any component.
You can put these styles in the theme under the
textStyles key to make easy to
re-use in the future.
Properties defined in a text style
In practice, we recommend using the same text style names used by designers on your team. Here are common ideas on how to name text styles: