Отображение реквизита в стилизованных компонентах

Question

Как отмечено в в этом ответе , можно значительно упростить количество кода, необходимого для проверки реквизита в Styled-Components. Например, сравните этот код:

  ${props =>
    Object.keys(props)
      .filter(key => colors[key])
      .map(color => `color: ${colors[color]};`)
      .join(' ')}

К этому:

  ${props => props.white && `color: ${colors.white}`}
  ${props => props.light && `color: ${colors.light}`}
  ${props => props.grey && `color: ${colors.grey.base}`}
  ${props => props.dark && `color: ${colors.dark}`}
  ${props => props.black && `color: ${colors.black}`}

  ${props => props.info && `color: ${colors.info}`}
  ${props => props.success && `color: ${colors.success}`}
  ${props => props.warning && `color: ${colors.warning}`}
  ${props => props.error && `color: ${colors.error}`}
  ${props => props.link && `color: ${colors.link.base}`}

Первая строка намного суше, чем вторые строки кода.

Однако есть и другие варианты использования, для которых я хотел бы упростить свой код, и я не знаю, как это сделать.

Например, рассмотрим следующий код:

${props => props.small === 'white' && `@media(min-width: 600px) {color: ${colors.white};}`}
${props => props.small === 'light' && `@media(min-width: 600px) {color: ${colors.light};}`}
${props => props.small === 'grey' && `@media(min-width: 600px) {color: ${colors.grey.base};}`}
${props => props.small === 'dark' && `@media(min-width: 600px) {color: ${colors.dark};}`}
${props => props.small === 'black' && `@media(min-width: 600px) {color: ${colors.black};}`}

${props => props.small === 'info' && `@media(min-width: 600px) {color: ${colors.info};}`}
${props => props.small === 'success' && `@media(min-width: 600px) {color: ${colors.success};}`}
${props => props.small === 'warning' && `@media(min-width: 600px) {color: ${colors.warning};}`}
${props => props.small === 'error' && `@media(min-width: 600px) {color: ${colors.error};}`}
${props => props.small === 'link' && `@media(min-width: 600px) {color: ${colors.link.base};}`}

Это очень похоже на то, что у меня было раньше, за исключением того, что сейчас у меня есть имя опоры под названием small, которое принимает определенное значение. Однако, поскольку собственное имя принимает значение, я не могу использовать решение Object.keys, упомянутое выше.

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

Есть идеи?

Answer 1

Это очень просто, вы проверяете, является ли props.small свойством colors, и если да, просто возвращаете значение colors[props.small].

${props => colors[props.small] && `@media(min-width: 600px) {color: ${colors[props.small]};}`}