Как я могу настроить файлы SCSS (способом ViewEncapsulated) в «реагировать на приложение 2», как SCSS для угловых компонентов?

Question

Я установил «приложение реакции 2», а также node-sass.С SCSS работает нормально.Но я просто хочу знать, как я могу создать специфичный для компонента SCSS, такой как Angular (который никогда не будет конфликтовать с другими компонентами SCSS)

Angular автоматически добавляет атрибут для ViewEncapsulation, см. Пример ниже

В угловыхопция для

инкапсуляции: ViewEncapsulation.None (используется для отключения инкапсуляции CSS для этого компонента) введите описание ссылки здесь

Answer 1

У React нет собственных стилей компонентов, как у Angular, потому что он стремится держаться подальше от любых функций, которые могут быть легко обработаны сторонними пакетами.Таким образом, у вас есть две довольно простые опции:

1. Используйте styled-components для создания стилей для конкретного компонента.Это довольно простой пакет, который позволяет вам определять стили для каждого элемента в компоненте, и вы даже можете передавать переменные в стили.Он генерирует внутренний CSS (хранится в тегах <style> в заголовке документа), который будет иметь приоритет над внешними стилями по умолчанию.Пример:

   // MainComponent.jsx
   import React from 'react';
   import styled from 'styled-components';
   
   const Title = styled.h1`
     color: red
   `
   
   const MainComponent = (props) => <Title>Hello World</Title>
   

2. В каждом из ваших компонентов добавьте класс или идентификатор к корневому элементу, чтобы вы могли просто добавить этот селектор в начало вашего SCSS, чтобы стилизовать только егоконкретный компонент.Пример:

   // MainComponent.jsx
   import React from 'react';
   
   const MainComponent = (props) => (
     <div className="main-component">
       <h1>Hello World</h1>
     </div>
   )
   
   // MainComponent.scss
   .main-component {
     h1 {
       color: red;
     }
   }
   

   Теперь только элементы h1 в вашем главном компоненте будут красными.

Answer 2

//JS
import React from "react";
import "./yourComponentName.scss";

export default props => {
  const { className, children, ...restOperator } = props;
  
  return (
    <a className={`yourComponentName ${className}` } {...restOperator}>
      {children}
    </a>
  );
}

//yourComponentName.scss

.yourComponentName{
    position:relative;
    background:red;
    /* your property and value use nesting*/

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    li { display: inline-block; }
    
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}