Как добавить одинаковые стили двум элементам сразу в styled-components?

Question

[Alexander]

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;
  }
`

Comments

[WbICHA]

Вынести функцию в переменную?
Вынести вообще весь этот блок в функцию?

[Alexander]

WbICHA, нужно чтобы было два разных дива, но стили одни и теже, ибо на каждом висит свой ref для слайдера.
Может это можно сделать как-то через деструктуризацию в styled-components?

[TRNER]

Alexander, styled-components возвращает компонент. Вы можете переиспользовать его точно так же, как и другие реакт компоненты, не обязательно делать каждый уникальным.

[WbICHA]

Alexander,

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

?

[Alexander]

TRNER, а нет я ошибся оно отлично работает с одним компонентом, спасибо

Answer 1

[Игорь Тимошенков]

Стили у вас объявлены как константы, так что можно просто использовать какой-то один из них или вынести в общий:

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