Styled-system: Extract backgroundColor from color

[smolak]

Some components don't need / can't have color (for the font).

Is it possible to extract backgroundColor from color such that I can just set the background color and not have to worry about color being present in the API of the component?

[vaishal]

Yeah you can import { backgroundColor } from 'styled-system'; you don’t have to import a whole category of style props.

[smolak]

Hmm ... I can't. I checked the dist folder and the export looks like this:

var _color = _interopRequireWildcard(require("@styled-system/color"));

exports.color = _color.color;

And the color holds backgroundColor. It is not exported as a standalone property.

Also, the types are wrong because of that: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-system/index.d.ts#L325

I also checked with:

import { backgroundColor } from 'styled-system';

console.log(backgroundColor); // undefined

[vaishal]

Apologies you are correct, I have imported other individual style functions such as margin before and assumed this was the same case.

[vaishal]

A workaround would be to create your own style function for example:

import { system } from 'styled-system';

const backgroundColor = system({
  backgroundColor: {
    property: 'backgroundColor',
    scale: 'colors',
}});