javascript - 如何使样式表仅可供一个组件 react.js 访问

Question

我有多个样式表。让我们说navbar.css和footer.css。:root我想在这两个 css 文件中使用伪元素来定义变量。但是，我不希望其他 css 文件可以访问这些变量。当我使用这两个组件时，css 文件会合并在一起，我的样式会发生冲突。我怎样才能防止这种情况？

App.jsx
---
import React from "react";
import Navbar from "./Navbar";
import Footer from "./Footer";

export default class App extends React.Component {
    render() {
         <Navbar/>
         <p>blah blah</p>
         <Footer/>
    }
}

Navbar.jsx
---
import React from "react";

export default class Navbar extends React.Component {
    render() {
        <div>...</div>
    }
}

Footer.jsx
---
import React from "react";

export default class Footer extends React.Component {
    render() {
        <div>...</div>
    }
}

Navbar.css
---
:root {
    bg-col: white;
}

Footer.css
---
:root {
    bg-col: black;
}

现在，我已经缩短了这些文件以使其简单，但是bg-col变量相互冲突。我怎样才能解决这个问题？

标签： javascripthtmlcssnode.jsreactjs