Условные стилевые компоненты в нотации объектов

Question

В документации по стилевым компонентам этот случай не упоминается, и я не могу понять синтаксис.

Как бы я включил этот стилизованный компонент:

const StyledButton = styled.button`
  color: red;
  ${props => props.disabled && css`
    color: grey;
    background-color: grey;
  `}
`

в обозначение объекта:

const StyledButton = styled.button(props => ({
  color: 'red',
  ------
}))

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

const StyledButton = styled.button(props => ({
  color: props.disabled ? 'grey' : 'red',
  backgroundColor: props.disabled ? 'grey' : transparent,
}))

Answer 1

Может быть, это то, что вам нужно (или подобное)

const StyledButton = styled.button((props) => {
  const disabledStyles =  {
    color: 'grey',
    'background-color': 'grey',
  };

  return {
    color: 'red',
    ...(props.disabled && disabledStyles)
  };
})

Я определенно не понимаю, почему вы не можете использовать троичный подход, который вы использовали выше, но у меня были странные требования и к проектам. Удачи