polished css,css - styled-components, polished and styledProps - darken() throwing error - Stack Ove...

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

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

Primary Button

Danger Button

Success Button

Info 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.