Javascript 如何使样式表仅可由一个组件react.js访问

我有多个样式表。比如说

navbar.css

和

footer.css

。我想在这两个css文件中使用伪元素

：root

，来定义变量。但是，我不希望其他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/>
    }
}

---

现在，为了保持简单，我缩短了这些文件，但是

bg col

变量相互冲突。如何解决这个问题？

FYI您实际上可以为局部性类添加CSS变量，这不仅仅适用于全局范围。如果您的两个react组件在主

div

中有一个特定的

className

，您可以让CSS文件显示

.class\u name{--bg col:black；}

，但是我仍然可以从同一文件中的另一个选择器访问这些变量吗？。它们不会冲突，即使您使用相同的变量名，由该笔演示。希望有帮助！仅供参考，您实际上可以为局部性类添加CSS变量，这不仅仅适用于全局范围。如果您的两个react组件在主

div

中有一个特定的

className

，您可以让CSS文件显示

.class\u name{--bg col:black；}

，但是我仍然可以从同一文件中的另一个选择器访问这些变量吗？。它们不会冲突，即使您使用相同的变量名，由该笔演示。希望有帮助！

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