How to add multiple styles based on property with styled-components?

If you want to share some styles you could simply move it into a variable that you use in both places:

import styled, { css } from 'styled-components'

const activeStyles = `
   background-color: #393939;
    border-color: #2F2F2F;
    box-shadow: inset 0 0 0 1px #3D3D3D,
        inset 0 2px 0 #323232;
`

export default styled.button`
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background-color: #535353;
  border: 1px solid transparent;
  cursor: pointer;
  outline: none;
  padding: 4px;

  &:active {
    ${activeStyles}
  }

  ${props => props.active ? css`${activeStyles}` : ''}
`