Question

我刚刚开始使用样式组件，抛光和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))};
  }
`;

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

样式组件，抛光和styledProps - darken（）抛出错误

1 个答案: