Стилизованные компоненты используют функцию в стилизованном объекте

Не удалось найти четкий пример использования функций в объектах css с styled-components. Это не ошибка, но фон не добавляется в вывод CSS при извлечении реквизита, как в примере ниже.

// Simple color function
const color = (error) => {
 if (error) {
   return 'red'
 }
 return 'black',
}

Работает – css

const StyledInput = styled.input<InputProps>`
  background: ${({ error }) => color(error)};`;

Работает – объект css

const StyledInput = styled.input<InputProps>(props => ({
  background: color(), // !!! NEED error from props
}));

Не работает – объект css

const StyledInput = styled.input<InputProps>(props => ({
  background: `${({ error }) => color(error)}`,
}));

javascript css styled-components css-in-js
person directory    schedule 01.04.2020    source источник
comment
Если у вас есть 2 метода работы, почему бы не использовать их? Я в замешательстве ... Вы имеете в виду, что ни один из них на самом деле не работает, вопреки тому, что вы заявили Works, Working и т. Д.   -  person segFault    schedule 01.04.2020
comment
Извините, рабочий пример не может принимать аргументы! error не установлен, мне нужно удалить его из реквизита.   -  person directory    schedule 01.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

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

// Simple color function
const color = (error) => {
  if (error) {
    return 'red';
  }
  return 'black';
};

const StyledInput = styled.input<InputProps>(({ error, ...props }) => ({
  background: color(error),
}));
person segFault    schedule 01.04.2020
comment
А что, если я захочу добавить пару аргументов, не только 'ошибка', допустим value, error и disabled. - person directory; 01.04.2020
comment
Единственное, что сейчас нужно, это то, что нам нужно уничтожить ключи из реквизита, который мы хотели бы передать. Было бы лучше, если бы мы могли уничтожить свойства, которые нам нужны для функции, для которой они нам нужны. - person directory; 01.04.2020