react如何处理 - 在css选择器中答案

【问题标题】：How does react handle - in css selectorreact如何处理 - 在css选择器中
【发布时间】：2021-06-05 16:17:17
【问题描述】：

我有一个 CSS 块

.button-set {
/* css styles */
}

如何使用 className 属性在 JSX 元素上使用它

【问题讨论】：

className="button-set" 不起作用吗？
不，我确实尝试过，但阅读文档时，类名被破坏以防止名称冲突
请提供一个最小的、可重现的例子。

标签： css reactjs jsx

【解决方案1】：

如果您使用的是 app.css 等外部 css 文件，则只需将其导入组件 (App.js) 并尝试此操作。

例如 - App.css -

.button-set{

background-color:black;
 color:white;
}

App.js

import './App.css';
function App() {
return (
<div className="App">
 return (
<div className="App">
    <button className="button-set">CLick me</button>
</div>


 );
}
export default App;

【讨论】：

【解决方案2】：

你可以试试这个

const YourFunction = () =>{
    return(
        <div className='botton-set'>
            Your content here
        </div> 
    )
}

【讨论】：

我确实这样做了，但这不起作用。请参阅我之前的评论以了解它不起作用的原因
无论如何它应该可以工作，确保你输入了正确的拼写和骆驼大小写，像这样...... className......其中'c'是小写但'N'是大写
我已经正确检查了所有这些。当我使用此import "../styles/globals.css" 进行导入时，我收到此错误./styles/globals.css Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules). Read more: https://nextjs.org/docs/messages/css-global Location: pages/index.js

【解决方案3】：

我不知道的是，当导入这样的 CSS 模块元素时，会返回一个键值对

import styles from "../styles/Home.module.css";

所以我可以很容易地做到这一点

<div className={styles["button-set"]}>
...
</div>

【讨论】：