Text Color

Utilities for controlling the text color of an element.

React propsCSS Properties
color={color}color: {color};

Usage

Control the text color of an element using the color={color} utilities.

<x.div color="red-500">Computers have ...</x.div> <x.div color="emerald-700">Computers have ...</x.div> <x.div color="light-blue-700-a50">Computers have ...</x.div> <x.div color="#f59e0b">Computers have ...</x.div> <x.div color="rgba(4, 120, 87, 0.5)">Computers have ...</x.div>

Hover

To control the text color of an element on hover, use color={{ hover: color }} utility.

<x.div color={{ _: 'red-400', hover: 'red-800' }}> Computers have lots of memory but no imagination. </x.div>

Focus

To control the text color of an element on hover, use color={{ focus: color }} utility.

<x.input defaultValue="Something" color={{ _: 'red-600', focus: 'red-800' }} />

Placeholder

To control the placeholder color of an element, use color={{ placeholder: color }} utility.

<x.input placeholder="Type something..." color={{ _: 'red-600', placeholder: 'red-300' }} />

Responsive

To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property color={{ md: "red-600" }} to an element would apply the color="red-600" utility at medium screen sizes and above.

<x.div color={{ md: 'red-600' }}>{/* ... */}</x.div>

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

Customizing

Colors

If you'd like to customize your values for kind of colors, use the theme.colors section of your theme.

  // theme.js
  import { th, generateHexAlphaVariants } from '@xstyled/styled-components'

  export const theme = {
    colors: generateHexAlphaVariants({
      // ...
+     'deep-blue': '#00008b',
+     'primary': th.color('red-600'),
    }),
  }
Edit this page on GitHub