Стилизация элементов массива NextJS

[Vladi7mir]

Не работают стили на данном участке кода в nextjs.
Создал список ссылок. Каждую ссылку хотелось бы стилизовать по своему.

		 <ul className={classes.postslist}>
			{posts && posts.map(({ id, title }) => (
			  <li key={id} className={classes.postsLi}>
				 <Link className={`classes.postLiLinks${id}`}  href={`/posts/${id}`}>{id} 
                                    {title} 
                                 </Link>
			  </li>
			) )}
		 </ul>

в браузере все прорисовывается

  <ul class="Posts_postslist__3oIcf">
      <li class="Posts_postsLi__vevNA">
         <a class="classes.postLiLinks1" href="/posts/1">1 Будь здоровым и сильным</a>
      </li>
      <li class="Posts_postsLi__vevNA">
         <a class="classes.postLiLinks2" href="/posts/2">2 qui est esse</a>
      </li>
       <li class="Posts_postsLi__vevNA">
          <a class="classes.postLiLinks3" href="/posts/3">3 ea molestias quasi exercitationem repellat qui 
                ipsa sit aut</a>
  </ul>

но мои стили не работают

   .postLiLinks1 {
	text-decoration: none;
	color: rgb(137, 192, 239);
    }

Если не применять id в названии класса,

<Link className={`classes.postLiLinks${id}`}

стили работают для всех ссылок, а хотелось бы для каждой! Спасибо!

[ADSoft]

Сообщение от Vladi7mir

стили работают для всех ссылок, а хотелось бы для каждой! Спасибо!

для всех == для каждой ... так-то

есди хотите индивидуально разное оформление для ссылок - надо привязываться к id уникальному

а не к общему классу, как вы сделали ... то что у вас написано - работает как задумано... для индивидуальных id - селектор # а не . .... это основы

#postLiLinks1 {
text-decoration: none;
color: rgb(137, 192, 239);
}
#postLiLinks2 {
text-decoration: underline;
color: rgb(255, 192, 239);
}

ну и соотвтесвенно у ссылок не класс - а id индивидуально менять

[Vladi7mir]

Спасибо!

[Vladi7mir]

Присвоил каждой ссылке

id={`postLiLinks${id}`}

но стили как и с классами не работают

#postLiLinks1 {
	text-decoration: none;
	color: rgb(137, 192, 239);
}

извините я только учусь
что-то упускаю
гуглил, не нашел, поэтому я здесь

[Valick]

Vladi7mir, убери точку в class="classes.postLiLinks3"
Вот так class="classes postLiLinks3" или вовсе оставь для начала только class="postLiLinks3"

[ADSoft]

в итоге то что получается?
должны быть ссылки с нужными id

P.S ну и стилизовать каждую ссылку по своему - это моветон.... одинаковое обычно оформление всех ссылок ... если только в порядке обучения

[Vladi7mir]

Valick, спасибо получилось! Но только если задавать стили в глобальном файле css. Без модульного css. Но это лучше, чем никак ! Спасибо!!!

[Vladi7mir]

ADSoft, без модульного css можно без id селектора, каждой ссылке присваивается class с различием id компонента массива. Все как и было изначально, только стили пишу в глобальном css.
Все работает!

[Valick]

Vladi7mir, хочешь чему-то реально научиться, читай книги, читай внимательно и как можно больше разных книг. https://vk.com/wall-54530371_1177