如何在“反应应用2”中设置Angular特定于SCSS的SCSS文件（以ViewEncapsulated方式）？

Question

我安装了“反应应用2”以及node-sass。使用SCSS可以正常工作。但是我只想知道如何创建像Angular这样的组件特定的SCSS（永远不会与其他组件SCSS冲突）

Angular自动为ViewEncapsulation添加属性，请参见下面的示例

在角度上，有一个

封装：ViewEncapsulation.None（用于禁用此组件的CSS封装） enter link description here

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. 在每个组件中，将一个类或ID添加到根元素，以便您可以简单地将该选择器添加到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;
     }
   }
   

   现在您的MainComponent中只有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;
    }
}