样式组件、抛光和样式道具 - darken() 抛出错误

Question

我刚刚开始使用 styled-components，优美的和 styledProps。

我正在尝试使用 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被定义为一个高阶函数，它返回另一个函数，它让props你通过一个styled-component. 另一方面，darken需要一个字符串作为它的第二个参数。

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

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

工作演示

或者，您可以background像这样修改地图定义：

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