反应切换 class，使用模块导入

Question

我正在尝试使用 useState 切换 class，但我导入了 class using 模块（不是全局的，xxx.module.css）。是否可以在不将它们更改为全局的情况下切换 class？

示例：

import styles from 'xxx.module.css'

function app(){
const [active, setActive] = useState(false);
return()
<div className={active ? "active" : " "}><p>Hy there!</p> </div>
<button onClick={() => setActive(!active)}>toggle me</button>

}
export default app

有 css

.active{
display: flex;
}

类似的东西，但是如果我使用模块导入 css 它不会真正起作用，因为它需要 {styles.active} （我已经尝试过更改 class 命名为 {styles.active} 它并没有真正起作用）。

有什么办法可以解决这个问题吗？谢谢！

Answer 1

我个人为此使用 classnames 库：

const className = classnames({ [styles.active]: active });

或者，您可以自己设置功能：

const className = active ? styles.active : undefined;

然后：<div className={className}>

Answer 2

您必须使用 className 作为 styles.active 并且不能在引号之间。所以你的分区标签必须是这样的：

<div className={active ? styles.active : " "}>
...some JSX...
</div>

PS: 您在此处编写的用于指定问题的代码充满了错误。我不认为在实际代码中你犯了这个可怕的错误，但我想指出这一点。

Answer 3

我的解决方案：

import s from './x.module.css'
import {useState} from 'react'
const App = () => {
const [active, setActive] = useState(false)
return (
  <div>
   <div className={active ? s.active : null}>Hi world!</div>
   <button onClick={()=> setActive(!active)}>Activate!</button>
  </div>
)
}

x.module.css:

.active {
    color: black;
}

反应切换 class，使用模块导入

react toggling class, importing using module

css

reactjs

use-state