inline CSS가 CSS 파일 속 CSS를 덮어버렸을 때 해결방법

이런문제가 발생하는원인 : inline CSS가 우선순위가 더 높아서 그렇다.

해결방법 : CSS파일에다가 !important 쓰면 된다

 <Link href={`/products/artworkmanagement`}>
  <div className={styles.titlesText} style={{color: router.pathname == `/products/artworkmanagement` ? "#9449F5" : "#000"}}>
   {t('nav.inventory')}
  </div>
 </Link>

.titlesText{
    color: #777;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    transition: color 0.3s;
}
.titlesText:hover{
    color: #9449F5 !important;
    transition: color 0.3s;
}