我安装了'react app 2'以及node-sass。它与 SCSS 一起工作得很好。但我只想知道如何创建像 Angular 这样的特定于组件的 SCSS（永远不会与其他组件 SCSS 发生冲突）
Angular 自动为 ViewEncapsulation 添加属性见下例
在 angular 中，有一个选项
encapsulation: ViewEncapsulation.None（用于禁用此组件的CSS封装） 在此处输入链接描述
如何在“react app 2”中设置 SCSS 文件（ViewEncapsulated 方式），如 Angular 组件特定的 SCSS？
IT技术
reactjs
webpack
sass
2021-04-28 17:50:39
3个回答
我知道这个问题很老，但没有答案，因此我想分享这篇文章。Alsomst 可以解决这个问题，除了它似乎不支持 ::ng-deep 之类的东西
React 没有像 Angular 那样的原生组件样式，因为它旨在远离任何可以由第三方包轻松处理的功能。所以你有两个非常简单的选择：
使用
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>在您的每个组件中，向根元素添加一个类或 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 元素会是红色的。
//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;
}
}