我有几个网页，我有这个：
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css">
</head>
<body>
<div class="full-height">
<div id="app" class="full-height">Loading...</div>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
如果我使用这个
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css">
在index.html中，整个应用程序中的样式均会受到影响，但我想在单个组件中使用它们。
我试图通过删除这两行并创建chat.scss
#chat{
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
@import url("https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css");
}
//other import statements
import "../../styles/chat.scss"
然后我将聊天组件的ID设置为'chat'并应用了scss
export default class Chat extends React.Component {
render() {
return (
<div id="chat">
<div className="full-height">
<div className="row">
<Nav/>
</div>
<div className="row full-height">
<div className="col-md-3 full-height">
<UserProfile/>
<OnlineUsers/>
</div>
<div className="col-md-9 full-height">
<div className="full-height">
<Messages/>
<MessageInput/>
</div>
</div>
</div>
</div>
</div>
);
}
}
此方法的输出与在index.html中导入样式表的输出相同。它会影响所有页面。
我的问题是如何仅将这些样式表应用于聊天组件。
我的解决方案是我不感到骄傲的解决方法，但这是您可以在javascript中动态禁用样式表的方式：
网页上的所有样式表都可以在document.styleSheets集合内找到。为了抓住第一个给我带来麻烦的东西：
var stylesheet = document.styleSheets[0];
然后我只是在我的组件中将其禁用：
stylesheet.disabled = true;