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

Question

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

我正在尝试使用 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 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 需要一个字符串作为它的第二个参数。

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

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

Working Demo

或者，您可以像这样修改 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)};
  }
`;

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

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

css

reactjs

styled-components