MQ + Theme Provider

[nathanaelphilip]

Is it possible to use the mq like this:

const ColumnOne = styled.div`
  ${({ theme }) => `
    ${mq({
      'paddingRight': [0, `${theme.spacer * 20}px`],
      'grid-column': ['1 / 15', '1 / 7']
    })}
    
    p {
      font-size: 16px;
      line-height: 1.7;

      &:first-of-type {
        font-size: 20px;
      }

      &:not(:last-child) {
        margin-bottom: ${theme.spacer * 4}px;
      }
    }
  `}
`

[vladyn]

Do you think this would work in practice?