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.

<> <template preview> <x.p textTransform="none" fontSize="xl" color="emerald-700"> Computers have lots of memory but no imagination. </x.p> </template> <x.p textTransform="none"> Computers have lots of memory but no imagination. </x.p> </>

Uppercase

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

<> <template preview> <x.p textTransform="uppercase" fontSize="xl" color="red-700"> Computers have lots of memory but no imagination. </x.p> </template> <x.p textTransform="uppercase"> Computers have lots of memory but no imagination. </x.p> </>

Lowercase

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

<> <template preview> <x.p textTransform="lowercase" fontSize="xl" color="violet-700"> Computers have lots of memory but no imagination. </x.p> </template> <x.p textTransform="lowercase"> Computers have lots of memory but no imagination. </x.p> </>

Capitalize

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

<> <template preview> <x.p textTransform="capitalize" fontSize="xl" color="amber-700"> Computers have lots of memory but no imagination. </x.p> </template> <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