css - styled-components, polished and styledProps - darken() 抛出错误

Question

我刚刚开始使用样式化组件、抛光和样式化 Prop 。

我正在尝试使用 styledProps 来为组件设置样式，如下所示......

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

在我的“styled.button”中，我正在尝试执行以下操作......

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

... 这样悬停和焦点状态可以使用相同的颜色，但只需更改阴影。

根据下面的错误，darken() 似乎只接受颜色字符串，不会通过 styledProps() 方法接收颜色。

知道如何让它工作吗？

谢谢!克里斯·西蒙尼

#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被定义为一个返回另一个函数的高阶函数，该函数接受您通过 styled-component 传递的 props。另一方面，darken需要一个字符串作为它的第二个参数。

因此，为了使您的代码正常工作，您必须执行 styledProps 返回的函数，如下所示:

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

Working Demo

或者，您可以像这样修改您的背景 map 定义:

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')
};

然后，您可以附加从 styledProps 返回的函数，如下所示:

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