在 React 和 JSX 中使用标准样式 css答案

【问题标题】：Using standard style css in React and JSX在 React 和 JSX 中使用标准样式 css
【发布时间】：2021-05-03 03:04:05
【问题描述】：

我下面有css。

在myCss.css

.playlist { margin: 200 200; }
.playlist .channel { background: grey; }

在 JSX 中

import "./myCss.css"
.
.

render (){
  return (
    <div className="playlist" id="playlist">
    </div>
  )
}

它不起作用。好吧，也许我需要一些特殊的方式来 JSX。

我用谷歌搜索了一些方法，比如styled component。

但是我想使用普通的css方式，因为.playlist .channnel等一些参数是由<div className="playlist" id="playlist">中的库生成的。

所以我无法改变。

我想在 React 和 JSX 中坚持使用普通的 css。

不可能吗？？？

【问题讨论】：

“它不起作用”是什么意思？你用的是什么捆绑器？ React 不知道你的 CSS 是如何处理的。检查时是否看到在渲染的 DOM 中应用的类？
这将在 create-react-app 项目中工作
请更具体地说明什么不起作用，因为它似乎像我在codesandbox 中所期望的那样起作用。
我错过了理解某些东西。某些属性有效，而其他属性无效。可能在某处被覆盖。这个项目是大项目的一部分。我会再检查一次。

标签： css reactjs jsx

【解决方案1】：

您的打包程序可能没有加载 css 文件。如果您使用的是 Webpack，请查看 css-loader - https://webpack.js.org/loaders/css-loader/

除此之外，styled-components 非常棒，您可以将它与您的“标准”css 一起使用。您可以使用 createGlobalStyle - https://styled-components.com/docs/api#createglobalstyle 定义您的“标准”css，并将 styled api 用于其他所有内容。

【讨论】：

非常感谢您的回复和建议。我发现我的css后来被覆盖了。我打算稍后学习样式组件。

【解决方案2】：

可能有问题

.playlist { margin: 200 200; }

首先，您需要指定px。它变成：

.playlist { margin: 200px 200px; }

其次，您删除第二个 200。既然没有意义。

.playlist { margin: 200px; }

【讨论】：

我认为这也可能是问题所在。我需要重新检查 css 数字。