Ошибка: Uncaught [Ошибка: передан неверный аргумент в цветовую функцию, пожалуйста, передайте строковое представление цвета - PullRequest
Новая
       12

Ошибка: Uncaught [Ошибка: передан неверный аргумент в цветовую функцию, пожалуйста, передайте строковое представление цвета

0 голосов
/ 22 января 2020

У меня проблема с компонентом реагирования на кнопки с использованием функции opacify из Полированная библиотека

Я использую стилевые компоненты для стилизации и тему с использованием ThemeProvider передать тему для использования. Когда я проверяю код, который возвращает эту ошибку, я использую также сборник рассказов, любая помощь приветствуется:) 

export const Button: React.FC<ButtonProps>  = styled(ButtonUI)` 
&.ui.button{

 &.inverted {
  background: ${props => opacify(-0.20, props.theme.greySteel)}!important;
 }
}

ошибка в моем тесте пряжи: 

Passed an incorrect argument to a color function, please pass a string representation of a color.

&.inverted {
    > 52 |        background: ${props => opacify(-0.20, props.theme.greySteel)}!important;
         |                               ^

Реквизит передается как: 

<ThemeProvider theme={dark}>

В раскадровке: 

const withGlobalStyles = (storyFn : any) => {
  return (
    <React.Fragment>
      <ThemeProvider theme={dark}>
      <GlobalStyle />
      {storyFn()}
      </ThemeProvider>
    </React.Fragment>
  );
}

Мой объект темы выглядит следующим образом: 

 export const dark: Palette = {
    greySteel: '#2E313F',

    }

Мое приложение. js

<ThemeProvider theme={dark}>

</ThemeProvider>

Мой файл story.tsx 

export const storyBuilder = (
      scenarios: Scenarios,
      storyPath: string,
      pageTemplate?: React.FC<any>,
    ) => {
      const Template: React.FC = pageTemplate || noTemplate;
      const stories = storiesOf(storyPath, module);
      stories.addDecorator(withKnobs as any);
      stories.addDecorator(withGlobalStyles as any)

      Object.keys(scenarios).forEach(key => {
        stories.add(key, () => (
          <ThemeProvider theme={dark}>
            <Provider store={store}>
              <Router>
                <Template>
                  <div>
                    {scenarios[key](knobs)}
                  </div>
                </Template>
              </Router>
            </Provider>
          </ThemeProvider>
        ))
      })
    };

Я нашел ответы по inte rnet, но ни один из них не помог мне, заранее спасибо

1 Ответ

0 голосов
/ 22 января 2020

opacify принимает цвет как строку: 

opacify(-0.20, 'rgba(255, 255, 255, 0.9)')

В соответствии с ошибкой, greySteel НЕ является строкой color.

Поэтому убедитесь, что это строка, вы можете использовать помощников типа rgbToColorString и убедиться, что они определены: 

opacify(-0.20, rgbToColorString({ red: 255, green: 205, blue: 100 })) 

background: ${props => opacify(-0.20, props.theme.greySteel || rgbToColorString({ red: 255, green: 205, blue: 100 }) )}!important;
...