Text Color
Utilities for controlling the text color of an element.
React props | CSS 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