Styled Components - передача объекта в качестве второго аргумента для функции цвета из полированного - PullRequest
Новая
       36

Styled Components - передача объекта в качестве второго аргумента для функции цвета из полированного

1 голос
/ 19 марта 2019

Я использую polished, о которой документацию можно прочитать, а здесь github репо здесь.

При написании стилей на JavaScript многим людям нужны вспомогательные функции в стиле Sass для продуктивной работы. ✨ polished приносит их вам в красивой, легкой упаковке, специально разработанной для стилей в JavaScript.

Я использую функцию tint, пример ее использования можно найти в приведенной выше ссылке на документацию:

Тонирует цвет, смешивая его с белым. Оттенок может вызывать сдвиги оттенков, когда светлее манипулирует каналом яркости и поэтому не вызывает сдвигов оттенков.

У меня есть объект темы, в котором хранятся все мои цвета, это что-то вроде этого: 

const object = {
  colors: {
    myDesiredColor: '#0000FF',
    ...otherColors
  },
};

Затем я экспортирую некоторые стили, которые собираюсь использовать повторно. Как ниже: 

export const containerStyles= css`
  color: ${tint(0.5, object.colors.myDesiredColor)};
  padding: 17px;
  margin-bottom: 10px;
  margin-top: 10px;
`;

Но я получаю следующую ошибку:

Uncaught Error: Произошла ошибка. См. https://github.com/styled-components/polished/blob/master/src/error/errors.md#5 для получения дополнительной информации.

К сожалению, вышеприведенное возвращает 404 Error, поэтому я не вижу, что там написано.

Я сталкивался с этим сообщением stackoverflow введите описание ссылки здесь , которое работает, но это не совсем то, что я ищу, так как я также использую этот подход в другом месте и не подходит для использования в тех ситуации. Так что в идеале я просто хочу передать переменную после извлечения цвета объекта темы. 

const getMyColor = ({ object }) => object.colors.myDesiredColor;

export const containerStyles= css`
  color: ${tint(0.5, getMyColor)};
  padding: 17px;
  margin-bottom: 10px;
  margin-top: 10px;
`;

Выше, в идеале, я бы хотел. Так что я могу легко назвать это в других случаях использования. Но я получаю ту же ошибку.

Я знаю (верю), что это как-то связано с тем, как я передаю второй аргумент. Я знаю, что она ожидает строку, и я предполагаю, что она не получает строку, но я не знаю, как исправить.

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

Любая помощь будет принята с благодарностью

Ответы [ 2 ]

1 голос
/ 10 апреля 2019

Очень поздно по этому поводу, но ваша проблема в том, что getMyColor - функция, а tint ожидает строку, как вы заявили.Мы не оцениваем функции, переданные в любой из цветовых модулей, поэтому вы должны оценить getMyColor, когда вы передадите его. Так что-то вроде этого: 

const getMyColor = ( object ) => object.colors.myDesiredColor;

export const containerStyles= css`
  color: ${tint(0.5, getMyColor(myTheme)};
  padding: 17px;
  margin-bottom: 10px;
  margin-top: 10px;
`

Рабочий пример

0 голосов
/ 20 марта 2019

Попробуйте вызвать вашу функцию (getMyColor ()) и посмотрите ответ, если это не строка, ваше исправление есть.

...