如何在“react app 2”中设置 SCSS 文件（ViewEncapsulated 方式），如 Angular 组件特定的 SCSS？

Question

我安装了'react app 2'以及node-sass。 它与 SCSS 一起工作得很好。 但我只想知道如何创建像 Angular 这样的特定于组件的 SCSS（永远不会与其他组件 SCSS 发生冲突）

Angular 自动为 ViewEncapsulation 添加属性见下例

在 angular 中，有一个选项

encapsulation: ViewEncapsulation.None（用于禁用此组件的CSS封装） 在此处输入链接描述

Answer 1

我知道这个问题很老，但它没有答案，因此我想分享这篇文章。 Alsomst 可以解决这个问题，除了它似乎不支持 ::ng-deep 之类的东西

Answer 2

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 3

 //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; } }