Javascript 在按钮上添加和删除css文件单击react js

我有一个应用程序，其中两个完全不同的页面有两个不同的css文件

one.Component.js应该包含style1.css，two.Component.js应该包含style2.css

我已经在组件文件中分别导入了css文件。但是当加载组件时，css会发生冲突，页面也会被折叠

one.Component.js：

import React, { Component } from "react";
import 'style1.css';

export default class ComponentOne extends Component {
    render() {
        return (
           <div class="theme-color">Hi</div>
        )
    }
}

import React, { Component } from "react";
import 'style2.css';

export default class ComponentTwo extends Component {
    render() {
        return (
           <div class="theme-color">Hi</div>
        )
    }
}

import React，{Component}来自“React”；
导入'style1.css'；
导出默认类ComponentOne扩展组件{
render（）{
返回(
你好
)
}
}

two.Component.js：

import React, { Component } from "react";
import 'style1.css';

export default class ComponentOne extends Component {
    render() {
        return (
           <div class="theme-color">Hi</div>
        )
    }
}

import React, { Component } from "react";
import 'style2.css';

export default class ComponentTwo extends Component {
    render() {
        return (
           <div class="theme-color">Hi</div>
        )
    }
}

import React，{Component}来自“React”；
导入'style2.css'；
导出默认类ComponentTwo扩展组件{
render（）{
返回(
你好
)
}
}

当这个react应用程序加载时，两个css都被加载，因此存在冲突

有谁能帮我让css文件仅在呈现特定页面时加载，而不是在加载页面时加载

或者可以在单击按钮时包含一个css文件，并根据显示的组件删除其他css文件

提前谢谢

import styles from "./style.css"

这将向类中添加随机字符串，因此它将成为组件范围

使用样式示例：

<button className={styles.button}>Button</button>

按钮

你的案子代码

构成部分1：

import React, { Component } from "react";
import style from 'style1.css';

export default class ComponentOne extends Component {
    render() {
        return (
           <div className={style.theme-color}>Hi</div>
        )
    }
}

import React，{Component}来自“React”；
从“style1.css”导入样式；
导出默认类ComponentOne扩展组件{
render（）{
返回(
你好
)
}
}

构成部分2：

import React, { Component } from "react";
import style from 'style2.css';

export default class ComponentOne extends Component {
    render() {
        return (
           <div className={style.theme-color}>Hi</div>
        )
    }
}

import React，{Component}来自“React”；
从“style2.css”导入样式；
导出默认类ComponentOne扩展组件{
render（）{
返回(
你好
)
}
}

Hi ZOthix。谢谢你的回复。我正在我的代码中尝试你的方法。你能告诉我如何使用两个类名吗。给我一个错误。此外，它抛出错误“style.theme-color”中未定义“color”。修复了“color”未定义的问题。使用className={style['theme-color']}这样就可以使用带有hypen的css类名\n您可以使用

className={[style.btn，style.btn default]}

或

className={`${style.btn}${style.btn default}`

如果我的答案解决了您问题中描述的问题，请将其标记为已接受的答案，以便其他人也能从中受益