Text Decoration

Utilities for controlling the decoration of text.

React propsCSS Properties
textDecoration={decoration}text-decoration: {decoration};

Underline

Use the textDecoration="underline" utility to underline text.

Computers have lots of memory but no imagination.

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

Line Through

Use the textDecoration="line-through" utility to strike out text.

Computers have lots of memory but no imagination.

<x.p textDecoration="line-through"> Computers have lots of memory but no imagination. </x.p>

No underline

Use the textDecoration="none" utility to strike out text.

Computers have lots of memory but no imagination.

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

Responsive

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

<x.div textDecoration={{ md: 'underline' }}>{/* ... */}</x.div>

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

Edit this page on GitHub