How to add the same styles to two elements at once in styled-components?

Question

css

export const PrevBtn = styled.div`
  svg {
    display: flex;
    color: ${(props) => props.theme.colors.primary};
    font-size: 50px;
    cursor: pointer;
  }
`
export const NextBtn = styled.div`
  svg {
    display: flex;
    color: ${(props) => props.theme.colors.primary};
    font-size: 50px;
    cursor: pointer;
  }
`

Answer 1

Your styles are declared as constants, so you can just use one of them or make it common:

const commonStyles = styled.div`
  svg {
    display: flex;
    color: ${(props) => props.theme.colors.primary};
    font-size: 50px;
    cursor: pointer;
  }
`
export const PrevBtn = commonStyles
export const NextBtn = commonStyles