Как передать реквизит сразу всем свойствам компонента css?

Question

Вместо того, чтобы постоянно подбирать реквизит вот так ...

const BubbleContainer = styled.View`
  background-color: ${({ theme }) => (theme.debug ? 'white' : 'blue')};
  border-width: ${({ theme }) => (theme.debug ? '1px' : '0px')};
  color: ${({ theme }) => (theme.debug ? 'red' : 'black')};
`;

Я бы хотел сделать это один раз так ( псевдокод ) ...

const BubbleContainer = styled.View`
  ${({ theme }) =>
    background-color: {theme.debug ? 'white' : 'blue'};
    border-width: {theme.debug ? '1px' : '0px'};
    color: {theme.debug ? 'red' : 'black'};
  }
`;

Answer 1

Вы были близки. Вам просто нужно использовать строку обратного тиска для интерполяции и многострочной поддержки.

const BubbleContainer = styled.View`
  ${({ theme }) => `
    background-color: ${theme.debug ? 'white' : 'blue'};
    border-width: ${theme.debug ? '1px' : '0px'};
    color: ${theme.debug ? 'red' : 'black'};
  `}
`;

Есть много вариантов, это может быть немного более разборчиво:

const BubbleContainer = styled.View`
  background-color: blue;
  border-width: 0px;
  color: black;

  ${({ theme }) => theme.debug && `
    background-color: white;
    border-width: 1px;
    color: red;
  `}
`;