styled-components, polished and styledProps - darken() throwing error

Question

I have just started using styled-components, polished and styledProps.

I am attempting to use styledProps to style components as follows …

<Button primary>Primary Button</Button>
<Button danger>Danger Button</Button>
<Button success>Success Button</Button>
<Button info>Info Button</Button>

In my “styled.button” I am trying to do the following ...

&:hover, &:focus {
   background-color: ${darken(0.20, styledProps(background))};
}

... so that the hover and focus states can use the same colors, but just change the shading.

It looks like darken() will only accept a color string and won’t receive the color via the styledProps() method based on the error below.

Any idea how I can get this to work?

Thank you! Chris Simeone

#styled-components #polished #styled-props

---

Error: Passed an incorrect argument to a color function, 
please pass a string representation of a color.
▼ 4 stack frames were expanded.
parseToRgb
node_modules/polished/dist/polished.es.js:1433
parseToHsl
node_modules/polished/dist/polished.es.js:1558
darken
node_modules/polished/dist/polished.es.js:1935
fn
node_modules/polished/dist/polished.es.js:1827
▲ 4 stack frames were expanded.
./src/Button.js
src/Button.js:6
  3 | import { darken } from 'polished'
  4 | import { theme, background, color, size } from "./Themes";
  5 | 
> 6 | export default styled.button`
  7 |   border-radius: 5px;
  8 |   border: 2px solid ;
  9 |   cursor: pointer;View compiled
▼ 12 stack frames were expanded.
__webpack_require__
/Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:678
fn
/Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:88
./src/App.js
http://localhost:3006/static/js/bundle.js:42399:66
__webpack_require__
/Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:678
fn
/Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:88
./src/index.js
http://localhost:3006/static/js/bundle.js:42608:63
__webpack_require__
/Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:678
fn
/Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:88
0
http://localhost:3006/static/js/bundle.js:42745:18
__webpack_require__
/Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:678
./node_modules/ansi-regex/index.js.module.exports
/Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:724
(anonymous function)
http://localhost:3006/static/js/bundle.js:728:10
▲ 12 stack frames were expanded.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

Answer 1

styled-props is defined as a higher order function which returns another function, which takes the props you pass through a styled-component. On the other hand, darken expects a string as its second parameter.

Therefore, to make your code working, you have to execute the function returned by styledProps, something like this:

const Button = styled.button`
  &:hover, &:focus {
    background-color: ${props => darken(0.20, styledProps(background)(props))};
  }
`;

Working Demo

Alternatively, you can modify your background map definition like this:

const background = {
  // darken is the function imported from polished
  primary: darken(0.20, '#F5F5F5'),
  danger: darken(0.20, '#DD2C00'),
  success: darken(0.20, '#7CB342'),
  info: darken(0.20, '#BBDEFB')
};

Then, you can attach the returned function from styledProps like this:

const Button = styled.button`
  &:hover, &:focus {
    background-color: ${styledProps(background)};
  }
`;