Стилизация модуля компонента nextJs – встроенные стили не работают

В настоящее время мы используем последнюю версию nextJs (v14) с реакцией (v18). Я попытался использовать модуль nextJs css (примечание: он работает с scss, однако в документации об этом не упоминается). Но обнаружил некоторые ограничения при работе с ним:

.toastSuccess {
  color: green;
  .undo {
    color: blue;
  }
}

.toastError {
  color: red;
  .undo {
    color: blue;
  }
}

Когда я импортирую его в файл .tsx и пытаюсь применить, он не работает:

import styles from "./toast.module.scss";

return (
 <div className = {isSuccess ? styles.toastSuccess : styles.toastError}>
   <div className = "undo">undo</div>
   ...
   </div>
 </div>
)

Теперь мне просто интересно, какой лучший подход в 2024 году — хранить и применять стили в «огромном» проекте NextJs, реагирующем на реакцию. Я нашел следующее:

вообще не делать стили, а комбинировать их из мелких частей (не знаю официального названия этого метода, но как бутстрап или попутный ветер: className = "d-flex flex-row m-4"
создайте огромную коллекцию уникальных стилей в папке стилей и используйте их
использовать стилизованные компоненты
используйте какое-то решение для стилизации модуля

Я думаю, что последний вариант лучше, поскольку определения стилей взяты из Figma, и лучше всего хранить их отдельно от файла .tsx (но близко к нему). Также гарантирует уникальность названий стилей и то, что каждая модификация имеет небольшое и предсказуемое влияние. Но это решение для стилизации модуля nextjs кажется не лучшим.

Есть ли другой подход или какое-то решение, которое работает лучше, чем это?

🤔 А знаете ли вы, что...
С React можно создавать одностраничные приложения (SPA), не перезагружая страницу.

[РЕШЕНО]Перейти к решению

Reactjs73808 вопросов Next.js2938 вопросов Sass3570 вопросов Styled components778 вопросов

Ответ:

Решено

Чтобы уточнить мой ответ: Для атомов/молекул я бы не использовал обычные классы, они предназначены только для более сложных компонентов, таких как панель навигации или, например, отображение продукта. Используя стилизованные компоненты, я бы сделал:


const Component = styled((props) => {
  return <div {...props}>
    <div class = "header" />
    <div class = "content" />
  </div>
})`

display: grid;
grid-template: 200px 1fr / 1fr;

& > .header {
  // .header styles
}

& > .content {
  // .content stlyes
}

`;

Для более сложных компонентов вы можете придерживаться полной генерации имени класса SC, но я также создал несколько приложений и обнаружил, что конфликт имен классов никогда не был такой уж большой проблемой, а использование только компонентов или модулей SC для каждого имени класса кажется обременительным.


const TextInner = styled.span``;

const Text = styled((props) => {
  const {component: Component = "p", ...rest} = props;
  return <Component {...rest}>
    <TextInner>{children}</TextInner>
  </Component>
})`

  ${TextInner} {}
`;

Стилизация модуля компонента nextJs – встроенные стили не работают

Ответ:

Интересные вопросы для изучения