Импортировать стили для унаследованных компонентов?

Question

У меня вопрос о том, как реагирующие компоненты взаимодействуют друг с другом.У меня такой вопрос: скажем, у меня есть дочерний компонент с именем About.js, и у меня также есть несколько sass-стилей, скажем, about.scss, в моем компоненте about я выполняю require (./ about.scss) и импортирую нужные мне стили.для моего компонента.

При рендеринге в родительском компоненте конфликтуют ли стили about.scss со стилями, присутствующими в файле parent.scss?

Каков наилучший способ стилизации отдельных компонентов инастройка структуры файла?

Спасибо!

Answer 1

Да, когда вы импортируете свой файл SCSS из файла React, веб-пакет делает то, что он берет ваш файл SCSS и преобразует его в файл CSS, а затем оборачивает содержимое тегом style и вставляет его на страницу, поэтомув конце дня ваша DOM будет выглядеть так:

<style>
// parent.css
.conflict{
  background: skyblue;
}
</style>

<style>
// about.css
.conflict{
  background: hotpink;
}
</style>

И большинство разработчиков React предпочитают метод стилизации компонента с использованием встроенного стиля

const App () => (
  <div
    style={{
      background: 'skyblue',
    }}
  >
  </div>
);