Text and Layer Styles
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.
Using textStyle
and layerStyle
props can help you keep things organized and
consistent.
Layer Style#
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
- Color or text color
- Background color
- Border width and border color
- Box shadow
- Opacity
// 1. Import `extendTheme`import { extendTheme } from '@chakra-ui/react'// 2. Extend the theme with new layer stylesconst theme = extendTheme({layerStyles: {base: {bg: 'gray.50',border: '2px solid',borderColor: 'gray.500',},selected: {bg: 'teal.500',color: 'teal.700',borderColor: 'orange.500',},},})// 3. Consume the text styles in your componentsfunction Example() {return <Box layerStyle='selected'>This is a box</Box>}// 4. You can also switch layer stylesfunction Example({ isSelected }) {const layerStyle = isSelected ? 'selected' : 'base'return <Box layerStyle={layerStyle}>This is a box</Box>}
Text Styles#
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
- Font family, weight, and size
- Line height
- Letter spacing
- Text decoration (strikethrough and underline)
- Text transform (uppercase, lowercase, and capitalization)
// 1. Import `extendTheme`import { extendTheme } from '@chakra-ui/react'// 2. Define the new text stylesconst theme = extendTheme({textStyles: {h1: {// you can also use responsive stylesfontSize: ['48px', '72px'],fontWeight: 'bold',lineHeight: '110%',letterSpacing: '-2%',},h2: {fontSize: ['36px', '48px'],fontWeight: 'semibold',lineHeight: '110%',letterSpacing: '-1%',},},})// 3. Consume the text styles in your componentfunction Example() {return <Box textStyle='h1'>This is a box</Box>}
Naming text styles#
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:
- Sized-based naming system (
xs
,sm
,md
,lg
,xl
) - Semantic naming system that corresponds to respective html tags in production
(
caption
,paragraph
,h1
,h2
) - Descriptive or functional naming system that explains the style's intended use
(
alert
,modal-header
,button-label
)