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

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

Как сделать сброс стилей в styled components?

Спасибо!

Как работать с навигацией на мобильных экранах в react?

Почему костыль? Если делать все отдельно, прийдется менять ссылки в двух местах сразу. У меня возникла идея создать массив ссылок и просто делать итерацию, это позволит решить проблему дублирования ссылок

Как динамически менять ссылку на кнопке после свайпа сдайда Swiper?

Вот что-то такое прикрутил

const [productLink, setProductLink] = React.useState<string>('/1')

let slides: any = []

  React.useEffect(() => {
    let swiperSlides = document.querySelectorAll('.heroSlide')
    slides = Array.from(swiperSlides)
  })

onSlideChangeTransitionStart={() => {
          const active = slides.find((item: any) => item.classList.contains('swiper-slide-active'))
          const arr = active.getAttribute('data-href')
          setProductLink(arr)
        }}

Работает нормально, только не знаю правильно ли это сделано со стророны react

Как добавить шрифты в styled components?

не уверен точно, но мне кажется require не работает в ts ибо ему нужен import для шрифтов, я решил это вот так

import styled, { createGlobalStyle } from 'styled-components'
import RobotoRegular from '../fonts/Roboto-Regular.ttf'
import UbuntuRegular from '../fonts/Ubuntu-Regular.ttf'

export const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'UbuntuRegular';
    src: url(${UbuntuRegular}) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }

  @font-face {
    font-family: 'RobotoRegular';
    src: url(${RobotoRegular}) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'UbuntuRegular';
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}

`

И добавил в католог файл fonts.d.ts, подключив его в tsconfig - include

declare module '*.eot'
declare module '*.woff'
declare module '*.ttf'

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

n1ksON, можно, но думал сделать это как в scss

Стоил ли сейчас добавлять локальные шрифты к проекту?

Спасибо

Где можно найти готовые макеты для верстки интернет магизина?

WapSter, опять же, спасибо)

Как создать Post Schema в mongoose?

WapSter, давно думал перейти на PostgreSQL, что думаешь лучше окончтательно забыть про mongo и писать все на PostgreSQL?

Почему не работает плавная прокрутка к якорю в Safari?

Вадим, я думал Вы о полифиле писали, теперь все прекрасно работает, спасибо большое

Почему не работает плавная прокрутка к якорю в Safari?

Вадим, не работает, при клике на ссылку происходит резкое движение вниз без анимации в safari, а в остальных браузерах все работает отлично. Может тут делаю что-то не так?

const anchors = document.querySelectorAll('a[href*="#"]');

  for (let anchor of anchors) {
    anchor.addEventListener("click", function (e) {
      e.preventDefault();
      burger.classList.remove("header-burger--active");
      document.body.classList.remove("active");
      menu.classList.remove("active");
      const blockID = anchor.getAttribute("href").substr(1);
      const element = document.getElementById(blockID);
      const topPos = element.getBoundingClientRect().top + window.pageYOffset;
      window.scrollTo({
        top: topPos,
        behavior: "smooth",
      });
    });
  }

Почему не работает плавная прокрутка к якорю в Safari?

Вадим, незнаю почему но сделал вот так

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

и все тоже самое

Почему не работает плавная прокрутка к якорю в Safari?

И как это можно пофиксить?

Как поправить валидацию формы js?

спасибо большое, работает отлично!

На чем писать лендинг в 2021 в js разработке?

слышал про next js на никогда не использвал, думаю это то что мне нужно

Как добавить mp4 видео в Webpack?

Владимир Коротенко, все еще 404 статус, пробовал добавить видео в папку как assets так и img, не помогает

Как добавить mp4 видео в Webpack?

Вы имеете ввиду сделать вот так?

{
        test: /\.(png|jpg|gif|svg|mp4)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },

Как добавить mp4 видео в Webpack?

Froggyweb, ошибся, извиняюсь

Как добавить значение к строке JS?

Спасибо!

Где лучше обрабатывать ошибки в SPA?

У меня просто была мысль сделать только на бэкэнде и отправлять на ui сам текст. Спасибо буду везде делать, вроде бы мелочь но для меня это важно понять ибо только начал бэкэнд учить