Styled-компоненты используют функцию в стиле объекта - PullRequest
Новая
       71

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

0 голосов
/ 01 апреля 2020

Не удалось найти четкий пример использования функций в 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)}`,
}));

1 Ответ

1 голос
/ 01 апреля 2020

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

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

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