Text Transform

Utilities for controlling the transformation of text.

React propsCSS Properties
textTransform={transformation}text-transform: {transformation};

Normal Case

Use the textTransform="none" utility to preserve the original casing. This is typically used to reset capitalization at different breakpoints.

<x.p textTransform="none"> Computers have lots of memory but no imagination. </x.p>

Uppercase

Use the textTransform="uppercase" utility to uppercase text.

<x.p textTransform="uppercase"> Computers have lots of memory but no imagination. </x.p>

Lowercase

Use the textTransform="lowercase" utility to lowercase text.

<x.p textTransform="lowercase"> Computers have lots of memory but no imagination. </x.p>

Capitalize

Use the textTransform="capitalize" utility to capitalize text.

<x.p textTransform="capitalize"> Computers have lots of memory but no imagination. </x.p>

Responsive

To control the text transformation of an element at a specific breakpoint, use responsive object notation. For example, adding the property textTransform={{ md: "uppercase" }} to an element would apply the textTransform="uppercase" utility at medium screen sizes and above.

<x.div textTransform={{ md: 'uppercase' }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub