Using Styled-Map with PolishedJS

Question

I have the following Styled-Map object:

export const colorProps = styledMap({
  default: yellow,
  primary: blue,
  secondary: green,
})

I use it as follows in a Styled Component:

const MyComponent = styled.div`
  ...

  background-color: ${colorProps};
  ...
`

This then allows me to use my component as follows:

And it will use the appropriate color value for the background-color.

So far, so good.

But now I would like to use polished to darken the background-color on hover -- something like this:

&:hover {
  background-color: ${darken(0.1, colorProps)};
}

But this does not work. It throws an error.

Error: Passed an incorrect argument to a color function, please pass a string representation of a color.

I am wondering, therefore, if anyone has any ideas on how I can use styled-map in conjunction with polished?

user_7882470 · Answer

darken Returns a string value for the darkened color.

darken(amount: (number | string), color: string): string

As 2nd argument, you need to pass a string where colorProps in your case is a function.

Therefore, pass the props object from styled-components to colorProps:

const COLORS = {
  default: 'yellow',
  primary: 'blue',
  secondary: 'green'
};

const colorProps = styledMap(COLORS);

const FlexBox = styled.div`
  background-color: ${props => darken(0.1, colorProps(props))};

  // border: 30px solid ${props => colorProps(props)};
  border: 30px solid ${colorProps};
  height: 100px;
`;

const App = () => {
  return ;
};

Using Styled-Map with PolishedJS

1 Answers