Импорт стилей для унаследованных компонентов React?
У меня вопрос о том, как компоненты React взаимодействуют друг с другом. Мой вопрос таков: скажем, у меня есть дочерний компонент с именем About.js, и у меня также есть несколько стилей sass, скажем about.scss, в моем компоненте about я требую (./ about.scss) и импортирую стили, которые мне нужны для моего компонента.
При визуализации в родительском компоненте стили about.scss конфликтуют со стилями, присутствующими в файле parent.scss?
Как лучше всего стилизовать отдельные компоненты и настроить файловую структуру?
Спасибо!
Ответы 1
Да, когда вы импортируете файл SCSS из файла React, веб-пакет берет ваш файл SCSS и преобразует его в файл CSS, обертывает содержимое тегом стиля и вставляет его на вашу страницу, поэтому в конце в этот день ваша DOM будет выглядеть так:
<style>
// parent.css
.conflict{
background: skyblue;
}
</style>
<style>
// about.css
.conflict{
background: hotpink;
}
</style>И большинство разработчиков React предпочитают метод стилизации компонента с использованием встроенного стиля.
const App () => (
<div
style = {{
background: 'skyblue',
}}
>
</div>
);