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

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

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

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

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

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

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

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

Неперехваченная ошибка: Произошла ошибка. См. 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;
`;

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

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

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

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


reactjs styled-components css-in-js
person Corbuk    schedule 19.03.2019    source источник
comment
Я думаю, что во втором фрагменте кода вы хотели написать object.colors.myDesiredColor вместо object.color.myDesiredColor. Это решает проблему?   -  person Huy Nguyen    schedule 19.03.2019
comment
Извините, что была опечатка при написании этого вопроса, я сейчас отредактирую сообщение, но все равно получаю сообщение об ошибке.   -  person Corbuk    schedule 19.03.2019

Ответы (2)


arrow_upward
1
arrow_downward

Очень поздно на вечеринку по этому поводу, но ваша проблема в том, что 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;
`

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

person Brian Hough    schedule 10.04.2019

arrow_upward
0
arrow_downward

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

person Fidan Fiksa Fidanoski    schedule 20.03.2019